Pernah nggak kamu nulis CSS, terus elemen yang harusnya ada di pojok kanan atas malah kabur entah ke mana? Atau bikin tombol "Back to Top" yang nempel di layar, tapi malah ikut-ikutan scroll bareng konten? Kalau pernah — selamat, kamu sedang berhadapan dengan salah satu topik paling krusial dalam CSS: CSS positioning, alias properti position.
Dalam artikel kelima dari Seri Belajar CSS ini, kita akan bedah tuntas semua nilai dari properti position — mulai dari static, relative, absolute, fixed, sampai sticky. Kalau kamu sudah paham HTML dan mulai belajar CSS, artikel ini pas banget buat kamu. Yuk mulai!
Properti position dalam CSS menentukan bagaimana sebuah elemen diposisikan di dalam alur dokumen (document flow) dan seberapa jauh ia dapat "keluar" dari posisi normalnya.
Nilai: static · relative · absolute · fixed · sticky
🏠 Apa Itu CSS Positioning? Analogi Rumah & Lantai
Bayangkan kamu sedang mendekorasi rumah. Secara default, semua furnitur diletakkan berurutan dari kiri ke kanan, atas ke bawah — seperti barang di supermarket yang disusun rapi di rak. Itulah perilaku normal (static) elemen HTML.
Tapi kadang kamu mau menaruh vas bunga sedikit ke kanan dari posisi aslinya tanpa menggeser furnitur lain — itu namanya relative. Ada juga bingkai foto yang ditempel di dinding dengan koordinat tepat, nggak peduli ada furnitur apa di sekitarnya — itulah absolute. Kalau kamu pasang kamera CCTV yang selalu nempel di sudut ruangan meski kamu jalan ke mana pun, itulah fixed. Dan terakhir, ada label harga yang menempel di rak selama kamu scroll ke bawah, tapi langsung berhenti begitu kamu lewati bagian tertentu — itulah sticky.
Properti position: absolute dan position: fixed membuat elemen "keluar" dari document flow, artinya elemen lain akan bertingkah seolah elemen itu tidak ada. Ini penyebab utama layout yang "amblas" atau tumpang tindih!
| Nilai | Document Flow | Bisa top/left/right/bottom? | Referensi Posisi |
|---|---|---|---|
static |
✅ Normal | ❌ Tidak berlaku | — |
relative |
✅ Normal (slot tetap) | ✅ Berlaku | Posisi diri sendiri |
absolute |
❌ Keluar dari flow | ✅ Berlaku | Parent positioned terdekat |
fixed |
❌ Keluar dari flow | ✅ Berlaku | Viewport (jendela browser) |
sticky |
✅ Normal (awalnya) | ✅ Berlaku (saat aktif) | Scroll container |
⚙️ Penjelasan Mendalam: Position CSS dari Static sampai Sticky
1. position: static — Default Biasa
Ini adalah nilai default semua elemen HTML. Tidak ada yang spesial — elemen mengikuti alur normal dokumen dari atas ke bawah. Properti top, left, right, dan bottom tidak berpengaruh sama sekali.
.kotak { position: static; /* default, jarang ditulis */ /* top, left, right, bottom tidak berlaku di sini */ }
2. position: relative — Geser dari Posisi Asli
Elemen tetap ada di document flow (slot awalnya "dipesan"), tapi kamu bisa menggesernya menggunakan top, left, dll. Bagaikan kamu menggeser vas bunga 10 cm ke kanan — tapi "bayangan" tempatnya tetap ada, sehingga furnitur lain tidak bergeser.
Ini juga sering digunakan sebagai parent container untuk anak yang ber-position: absolute!
.kotak { position: relative; top: 20px; /* turun 20px dari posisi normal */ left: 10px; /* geser kanan 10px */ }
Nilai negatif pun bisa dipakai! top: -10px artinya elemen naik 10px dari posisi normalnya. Ini berguna untuk efek "melayang" atau badge yang sedikit overlap.
3. position: absolute — Bebas, Relatif ke Parent
Elemen ini "keluar" dari document flow — artinya elemen lain tidak lagi memperhitungkan keberadaannya. Posisinya dihitung berdasarkan ancestor (parent/kakek) yang memiliki position selain static. Jika tidak ada, maka referensinya adalah <html>.
Inilah yang dipakai untuk membuat badge notifikasi, tooltip, dropdown menu, atau overlay.
/* Parent harus punya position: relative */ .wrapper { position: relative; width: 200px; height: 200px; } /* Badge di pojok kanan atas */ .badge { position: absolute; top: 8px; right: 8px; background: red; color: white; border-radius: 50%; }
Masalah paling umum: kamu pakai position: absolute tapi hasilnya nempel di sudut seluruh halaman, bukan di dalam card-mu.
Solusinya: Pastikan parent langsung atau salah satu ancestor-nya punya position: relative. Tanpa itu, elemen absolute akan "terbang" ke pojok halaman.
4. position: fixed — Selalu Nempel di Layar
Elemen dengan position: fixed juga keluar dari document flow, tapi posisinya selalu relatif terhadap viewport (jendela browser), bukan ke parent manapun. Artinya, meski pengguna scroll ke mana pun, elemen ini tetap di tempat yang sama di layar. Ini dipakai untuk navbar sticky, tombol chat, atau floating button.
/* Tombol "Kembali ke Atas" */ .back-to-top { position: fixed; bottom: 24px; right: 24px; z-index: 999; background: #6366f1; color: white; padding: 12px 16px; border-radius: 50%; }
5. position: sticky — Hybrid Static + Fixed
Inilah yang paling "ajaib": elemen berperilaku seperti relative sampai posisi scroll tertentu, lalu "nempel" seperti fixed saat pengguna scroll melewatinya. Setelah melewati batas container parent-nya, elemen ini berhenti menempel dan kembali ke alur normal. Dipakai untuk header tabel, section label, atau sidebar navigasi.
Syarat wajib: parent container tidak boleh punya overflow: hidden atau overflow: auto, karena itu akan "memenjarakan" sticky-nya.
/* Header yang nempel saat scroll */ .header-section { position: sticky; top: 0; /* nempel saat 0px dari atas viewport */ background: white; z-index: 100; padding: 16px; } /* INGAT: parent tidak boleh overflow: hidden! */
position: sticky membutuhkan nilai top, bottom, left, atau right untuk bisa aktif. Tanpa salah satu nilai itu, sticky tidak akan bekerja — elemen akan tetap seperti relative biasa.
🛠️ Panduan Praktis: Cara Pakai CSS Positioning Step by Step
Sekarang waktunya langsung praktik! Kita akan membuat sebuah card produk dengan badge "BARU" di pojok kanan atas — salah satu use-case position: absolute yang paling sering dijumpai di dunia nyata.
Siapkan div wrapper sebagai parent, isi dengan gambar produk dan badge.
<div class="card-produk"> <span class="badge-baru">BARU</span> <img src="produk.jpg" alt="Produk"> <p>Nama Produk</p> </div>
Tambahkan position: relative ke wrapper agar badge tahu "rumah"-nya.
.card-produk { position: relative; /* kunci utama! */ width: 200px; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
Pakai position: absolute dan atur koordinatnya dari pojok card.
.badge-baru { position: absolute; top: 10px; right: 10px; background: #6366f1; color: white; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
Buka di browser, cek di DevTools (F12 → Inspector). Coba ubah nilai top dan right sampai posisinya pas. Ingat, eksperimen adalah guru terbaik dalam belajar CSS positioning!
Saat elemen sudah keluar dari document flow (absolute, fixed), mereka bisa saling tumpang tindih. Gunakan properti z-index untuk mengatur urutan tumpukannya — nilai lebih besar = tampil di atas. Ingat: z-index hanya berlaku untuk elemen yang punya nilai position selain static!
🎯 Kapan Pakai yang Mana? Panduan Cepat CSS Positioning
Setelah paham semua nilai, pertanyaan berikutnya adalah: kapan harus pakai yang mana? Berikut panduan keputusan cepat untuk kamu simpan sebagai referensi sehari-hari:
Kesimpulan: Kuasai CSS Positioning, Kuasai Layout!
Dalam artikel ini kita telah membahas tuntas semua nilai properti CSS positioning — dari static yang sederhana, relative yang fleksibel, position absolute dan position relative yang menjadi duo terkuat untuk komponen UI, fixed yang selalu nempel di layar, hingga sticky yang cerdas mengikuti scroll.
Ingat tiga kunci utamanya:
- absolute selalu butuh parent ber-
position: relativeagar tidak "kabur" - fixed selalu relatif ke viewport, bukan ke parent manapun
- sticky butuh nilai
top/bottom/left/rightdan parent tanpaoverflow: hidden
Kalau masih bingung, coba langsung eksplorasi di browser dengan DevTools — tidak ada cara belajar CSS yang lebih efektif selain langsung ngulik sendiri!
Artikel ini bagian dari Seri Belajar CSS — 13 artikel dari nol sampai mahir.
No comments:
Post a Comment