Position menentukan elemen ikut alur halaman atau lepas dan ditempel di titik tertentu, dan z-index menentukan siapa yang di depan kalau dua elemen bertumpuk. Di Tailwind, tiap nilai jadi satu class: relative, absolute, sticky, top-0, z-50. Bayangin stiker "Baru" di kotak kue. Kamu bilang "ukur dari kotak ini" (relative di kotaknya), lalu "tempel di pojok kanan atas" (absolute top-0 right-0 di stikernya). Kalau kotaknya gak ditandai, stikernya diukur dari mejanya, dan nempel di pojok meja.
🧪 Tebakan cepat: badge
absolute top-0 right-0ada di dalam kartu, tapi kartunya gak dikasihrelative. Badge-nya nempel di pojok mana? Tebak dulu, jawabannya ada di bagian "Patokannya: indukrelative".
Badge di pojok kartu
Ini kartu yang sama dengan yang ada di Lab dan di latihan:
<div id="parent" class="relative h-32 bg-gray-100">
Kartu produk
<div id="badge" class="absolute top-0 right-0 bg-rose-500 text-white">Baru</div>
</div>
| Class | CSS yang dihasilkan | Artinya |
|---|---|---|
relative |
position: relative; |
kartu jadi patokan buat anaknya |
h-32 |
height: 8rem; |
tinggi kartu 128px |
absolute |
position: absolute; |
badge lepas dari alur dan ditempel |
top-0 |
top: 0; |
jarak 0 dari tepi atas patokan |
right-0 |
right: 0; |
jarak 0 dari tepi kanan patokan |
relativetanpatopatauleftgak menggeser kartunya sama sekali. Tugasnya cuma jadi patokan.absolutemencabut badge dari alur, jadi teks "Kartu produk" gak lagi memberi tempat buatnya.top-0 right-0menempelkan badge ke pojok kanan atas. Angkanya ikut skala Tailwind:top-2= 8px dari atas, dan-top-2(pakai minus) = 8px keluar ke atas.
Hasilnya, badge "Baru" nempel pas di pojok kanan atas kartu.
Patokannya: induk relative
Elemen absolute diukur dari induk terdekat yang position-nya bukan static. Kalau #parent gak punya relative, gak ada induk seperti itu, jadi badge diukur dari halaman. Badge-nya terbang ke pojok kanan atas halaman, bukan pojok kartu. Itu jawaban tebakannya.
Polanya selalu berpasangan: relative di induk, absolute di anak. Overlay yang menutup seluruh kartu juga begitu: absolute inset-0 di anak (inset-0 = top, right, bottom, left semuanya 0).
Navbar yang menempel: sticky dan fixed
<header class="sticky top-0 z-50 w-full bg-white">Navbar</header>
| Class | Saat halaman di-scroll |
|---|---|
static (bawaan) |
ikut alur, ikut tergulung ke atas |
sticky top-0 |
ikut alur sampai menyentuh tepi atas layar, lalu nempel di situ |
fixed top-0 |
dari awal lepas dari alur dan nempel di layar, gak pernah ikut tergulung |
stickybutuh batas, di sinitop-0. Tanpa batas, dia gak tahu kapan harus nempel.fixedlepas dari alur sejak awal, jadi konten di bawahnya naik dan baris pertamanya ketutup navbar.stickytetap memberi tempat di alur.- Jadi bedanya:
fixedselalu tetap,stickybaru nempel setelah di-scroll sampai batasnya.
Siapa di depan: z-*
z-10 menghasilkan z-index: 10, z-50 menghasilkan z-index: 50. Angka lebih besar tampil di depan. Skala bawaannya z-0, z-10, z-20, z-30, z-40, z-50, dan z-auto. Di Tailwind v4, angka lain juga boleh, misalnya z-60.
Di Lab, kartunya relative dan ditulis sesudah navbar. Waktu halaman di-scroll, kartu itu lewat di atas navbar sticky, karena dua-duanya belum punya z-index, dan yang ditulis belakangan di HTML tampil di depan. Tambahkan z-50 di navbar, dan navbar kembali di depan.
⚠️ Jebakan yang sering ketemu
- Lupa
relativedi induk. Badgeabsoluteterbang ke pojok halaman. Latihannya mengecekposition: relativedi#parentdanposition: absolutedi#badge. absolutetanpa arah. Tanpatop-0 right-0, badgeabsolutetetap di tempat asalnya di alur, di sisi kiri kartu, bukan di pojok kanan atas.stickytanpatop-0. Navbar-nya ikut tergulung kayakstatic, karena gak ada batas nempelnya.z-50di elemenstatic. z-index cuma jalan di elemen yangposition-nya bukanstatic. Pasangkan denganrelative,absolute,sticky, ataufixed.
TL;DR: relative di induk + absolute top-0 right-0 di anak = anak nempel di pojok kanan atas induknya. Tanpa relative, patokannya halaman. sticky top-0 ikut alur lalu nempel di atas saat di-scroll, fixed nempel di layar dari awal dan keluar dari alur. z-50 = z-index: 50: angka lebih besar di depan, dan cuma jalan di elemen yang punya position selain static.
