Kuasai penempatan elemen di halaman web! Pelajari berbagai nilai properti `position` CSS (static, relative, absolute, fixed, sticky) dan cara kerjanya.
16m bacaanKuis WajibMicro Badge Lesson
Materi ini akan membantu kita memahami cara menempatkan elemen secara lebih presisi di halaman.
Memposisikan Elemen di Tempat yang Pas: Jurus Sakti Properti position CSS!
Udah bisa bikin elemen, ngasih style, bahkan ngubah bentuknya pake transform? Keren! Tapi, gimana kalau kamu pengen naro satu elemen numpuk di atas elemen lain? Atau bikin header yang nempel terus di atas layar pas halaman di-scroll? Atau ngasih catatan kecil yang posisinya pas di sebelah gambar tertentu?
Nah, buat ngatur penempatan elemen yang lebih "bebas" dari alur normal dokumen, CSS nyediain properti position. Properti ini, digabung sama properti offset (top, right, bottom, left), ngasih kamu kontrol penuh buat "mindahin" elemen dari posisi aslinya.
Ada lima nilai utama buat properti position yang perlu kamu tau:
static (Ini Nilai Default-nya)
relative
absolute
fixed
sticky
Yuk, kita bedah satu-satu biar gak bingung!
1. - Si Normal yang Gak Neko-Neko
position: static;
Ini adalah nilai default buat semua elemen HTML.
Cara Kerja:
Elemen bakal ditempatin sesuai alur normal dokumen (normal document flow). Elemen blok bakal numpuk vertikal, elemen inline bakal ngalir sejajar.
Properti offset (top, right, bottom, left) dan z-indexGAK BAKAL NGEFEK ke elemen yang position: static;.
Kapan Dipake?: Ya ini bawaannya. Kamu jarang banget perlu nulis position: static; secara eksplisit, kecuali kalau mau "ngembaliin" elemen yang sebelumnya udah di-set position lain jadi normal lagi.
css
.elemen-biasa { position: static; /* Ini default, jadi gak akan ada perubahan visual */ top: 50px; /* Gak ngefek! */ left: 50px; /* Gak ngefek juga! */}
2. position: relative; - Geser Dikit dari Posisi Asli
Dengan position: relative;, kamu bisa menggeser posisi elemen dari posisi normalnya, tapi elemen itu tetep ngambil ruang di posisi aslinya di alur dokumen.
Cara Kerja:
Elemennya masih dianggep ada di posisi normalnya di layout, jadi elemen lain gak bakal geser buat ngisi "bekas" tempatnya.
Baru setelah itu, elemennya digeser pake properti top, right, bottom, left. Pergeserannya ini relatif terhadap posisi normalnya sendiri.
Elemen dengan position: relative; bisa jadi konteks penempatan (containing block) buat elemen anaknya yang punya position: absolute; (ini penting, nanti kita bahas).
Kapan Dipake?:
Buat ngasih sedikit offset visual ke elemen tanpa ngerusak layout sekitarnya.
Paling sering dipake buat jadi "induk" atau "patokan" buat elemen position: absolute; yang ada di dalemnya.
css
.geser-dikit { position: relative; left: 20px; /* Geser 20px ke kanan dari posisi normalnya */ top: 10px; /* Geser 10px ke bawah dari posisi normalnya */ background-color: lightcoral;}.elemen-lain { background-color: lightblue; /* Elemen ini gak bakal geser meskipun .geser-dikit dipindahin */}
Kalau kamu inspect, .geser-dikit bakal keliatan pindah, tapi "ruang kosong" seukuran dia masih ada di posisi awalnya.
3. position: absolute; - Bebas Lepas dari Alur Normal!
Nah, ini yang seru! Dengan position: absolute;, elemen diangkat keluar sepenuhnya dari alur normal dokumen. Dia jadi kayak "hantu" yang gak ngambil ruang sama sekali di layout aslinya.
Cara Kerja:
Elemen lain bakal nganggap elemen absolute ini gak ada, jadi mereka bakal ngisi ruang yang tadinya ditempatin elemen absolute itu.
Posisinya ditentuin pake top, right, bottom, leftrelatif terhadap elemen induk terdekatnya yang punya position selain static (biasanya relative, absolute, atau fixed).
Kalau gak ada induk yang position-nya non-static, dia bakal ngacu ke elemen <body> atau blok penampung awal (initial containing block).
Kapan Dipake?:
Buat naro elemen numpuk di atas elemen lain (misal, ikon di atas gambar, pop-up, tooltip).
Buat bikin layout yang posisinya presisi banget di dalem sebuah kontainer.
css
.kontainer-induk { position: relative; /* PENTING! Biar jadi patokan buat .anak-absolut */ width: 300px; height: 200px; background-color: lightgreen; padding: 10px;}.anak-absolut { position: absolute; top: 20px; /* 20px dari atas .kontainer-induk */ right: 20px; /* 20px dari kanan .kontainer-induk */ background-color: orange; padding: 15px;}
Di contoh ini, .anak-absolut bakal ada di pojok kanan atas (dengan offset 20px) di dalem .kontainer-induk. Kalau .kontainer-induk gak punya position: relative;, si .anak-absolut bakal ngacunya ke <body>.
4. position: fixed; - Nempel Terus di Layar!
position: fixed; mirip sama absolute karena elemennya juga diangkat keluar dari alur normal dokumen. Tapi bedanya, elemen fixed ini posisinya relatif terhadap viewport browser (jendela browser), bukan terhadap elemen induk.
Cara Kerja:
Elemen bakal "nempel" di posisi tertentu di layar, gak peduli kamu scroll halamannya sejauh apapun.
Posisinya ditentuin pake top, right, bottom, left ngacu ke tepi jendela browser.
Kapan Dipake?:
Buat bikin header atau navigasi yang nempel di atas pas di-scroll.
Buat tombol "Back to Top".
Buat pop-up atau notifikasi yang selalu keliatan di layar.
css
.header-nempel { position: fixed; top: 0; left: 0; width: 100%; /* Biar lebarnya penuh layar */ background-color: #333; color: white; padding: 10px; z-index: 100; /* Biar selalu di atas konten lain, nanti dibahas */}.tombol-ke-atas { position: fixed; bottom: 20px; right: 20px; background-color: dodgerblue; color: white; padding: 10px; border-radius: 5px;}
5. position: sticky; - Si Hybrid yang Nempel Pas Udah Lewat
position: sticky; ini kayak gabungan antara relative dan fixed.
Tapi, pas kamu nge-scroll halaman dan elemen ini nyampe di posisi offset tertentu (yang kamu tentuin pake top, right, bottom, atau left), dia bakal berubah jadi kayak position: fixed; dan nempel di situ.
Offset (top, right, bottom, left) ini wajib diset biar sticky bisa kerja. Offset ini nentuin "batas" di mana dia mulai nempel.
Elemen sticky "nempel" di dalem kontainer induk terdekatnya yang punya mekanisme scrolling.
Kapan Dipake?:
Buat judul section yang nempel di atas pas section-nya di-scroll.
Buat sidebar yang ikut scroll sampe batas tertentu terus nempel.
Navigasi sekunder.
css
.judul-seksi-nempel { position: sticky; top: 0; /* Bakal nempel di atas viewport pas udah nyampe 0px dari atas */ background-color: white; padding: 10px; border-bottom: 1px solid lightgray; z-index: 50;}/* Pastikan parent dari .judul-seksi-nempel ini punya cukup tinggi *//* atau bisa di-scroll biar efek sticky keliatan */
Dukungan browser buat sticky udah bagus, tapi kadang ada kelakuan aneh kalau parent-nya punya overflow tertentu.
Properti Offset: top, right, bottom, left
Properti-properti ini (top, right, bottom, left) dipake buat nentuin posisi akhir elemen kalau position-nya adalah relative, absolute, fixed, atau sticky.
Nilainya bisa pake unit panjang (px, em, %, dll.).
Persentase (%) diitung berdasarkan dimensi elemen induk penampungnya (containing block).
Properti z-index: Ngatur Tumpukan Elemen
Kalau kamu punya beberapa elemen yang position-nya non-static dan saling numpuk, properti z-index nentuin urutan tumpukannya (mana yang di atas, mana yang di bawah).
Cara Kerja:
Elemen dengan nilai z-indexlebih besar bakal tampil di atas elemen dengan z-index lebih kecil.
Nilainya bisa angka positif, negatif, atau 0. Defaultnya auto (yang kira-kira sama kayak 0).
z-indexcuma ngefek ke elemen yang punya position selain static.
Elemen dengan z-index akan membuat stacking context baru. Ini konsep yang agak dalem, tapi intinya, anak-anak dari elemen yang punya z-index akan ditumpuk relatif terhadap parent itu, gak peduli z-index elemen lain di luar parent itu.
css
.modal-popup { position: fixed; /* ... style lain ... */ z-index: 1000; /* Biar popup selalu paling atas */}.overlay-gelap { position: fixed; /* ... style lain ... */ z-index: 999; /* Di bawah popup, tapi di atas konten biasa */}.header-nempel { position: fixed; /* atau sticky */ /* ... style lain ... */ z-index: 100; /* Di atas konten biasa, tapi di bawah overlay/popup */}
Menguasai properti position ini bener-bener ngebuka banyak banget kemungkinan buat ngatur layout dan bikin efek visual yang menarik. Awalnya mungkin kerasa agak membingungkan bedanya relative sama absolute, tapi dengan banyak nyoba dan liat efeknya langsung di browser, pasti bakal makin paham.
Ingat, position: relative; sering jadi "jangkar" buat anak-anaknya yang position: absolute;. Dan fixed atau sticky asyik buat elemen yang mau "nempel".
Checkpoint KuisTarget: 70%
Kuis Positioning CSS
Kuis ini wajib untuk sertifikat. Kamu tetap bisa lanjut ke pelajaran berikutnya dan mengerjakannya nanti.
