Position — CSS — Hyper Sheets

Coba scroll halaman web mana aja. Header yang nempel di atas walau kamu scroll? Tombol "Back to Top" yang mengikuti di pojok kanan bawah? Modal popup yang muncu

Coba scroll halaman web mana aja. Header yang nempel di atas walau kamu scroll? Tombol "Back to Top" yang mengikuti di pojok kanan bawah? Modal popup yang muncul nge-overlay halaman? Semua sihir itu kerjaan properti position. Default-nya tiap elemen ngalir ngikutin alur dokumen biasa, tapi position bisa "lepasin" elemen dari alur dan taruh di mana aja yang kamu mau.

💡 Bug klasik: fixed di dalam transform. position: fixed SEHARUSNYA nempel di viewport. Tapi kalau ancestor punya transform, filter, atau will-change — fixed malah nempel ke ancestor itu, bukan viewport. Kelihatan kayak bug, tapi sesuai spec. Kasus ini sering bikin modal "ke-trap" di dalam container — selalu cek ancestor punya transform gak.

Lima nilai position:

static: ngalir ngikutin alur normal dokumen — default tiap elemen.
relative: tetap di alur normal, tapi bisa di-nudge pakai top/right/bottom/left. Spot asli tetap dipertahankan.
absolute: lepas alur — spotnya hilang, diisi elemen berikutnya. Posisi relatif ke parent terdekat yang position-nya bukan static.
sticky: ngalir di alur normal sampai batas scroll tertentu, lalu nempel di layar. Hybrid relative + fixed.
fixed: lepas alur sejak awal, nempel di viewport — gak peduli halaman discroll.

Kuning = relative geser dari spotnya. Merah = absolute lepas alur. Ungu = fixed nempel viewport. Hijau = sticky.

Berikut contoh penggunaan properti position:

position: absolute;
top: 20px; left: 20px;

🎭 Analogi sehari-hari

position = aturan parkir mobil:

static = parkir paralel ikut antrean (default).
relative = nudge dari spot biasanya, tetapi tempat asli tetap dijaga.
absolute = parkir bebas, tapi ngacu ke titik referensi terdekat (parent positioned).
fixed = nempel di kaca depan layar, tidak bergerak walau scroll.
sticky = ikut antrean sampai batas tertentu, lalu nempel.

⚠️ Jebakan yang sering ditemui

absolute butuh ancestor positioned — kalau tidak ada ancestor dengan position selain static, absolute jadi relatif ke <html>. Selalu set position: relative di parent kontekstual.
sticky tidak nempel — penyebab umum: (1) parent punya overflow: hidden|auto|scroll, (2) tidak set top / bottom, (3) parent tidak punya tinggi yang cukup untuk discroll.
fixed di dalam transform — elemen fixed di dalam ancestor yang punya transform, filter, atau will-change jadi relatif ke ancestor itu, bukan viewport. Browser bug-fitur, bukan bug.
z-index tidak bekerja — z-index butuh position selain static. Atau cek apakah ancestor punya stacking context (transform, opacity < 1, dst).
top: 0; bottom: 0 di absolute — bikin elemen melebar mengisi parent. Kalau cuma butuh tinggi/lebar tertentu, set height/width eksplisit.

TL;DR: position ngatur cara elemen "berada" di halaman. static (default) ngalir biasa. relative geser sedikit dari spot biasa. absolute lepas alur, ngacu ke parent positioned terdekat. fixed nempel viewport. sticky hybrid — alur biasa sampai batas scroll, terus nempel.

🎯 Pilih position apa?

Header yang nempel di atas walau scroll → sticky (atau fixed kalau gak peduli alur)

Modal/popup yang nge-overlay seluruh halaman → fixed

Tooltip/badge yang nempel di sudut elemen lain → absolute (parent-nya relative)

Geser sedikit dari spot biasa tanpa ganggu layout → relative

Default tiap elemen → static

Aturan emas: 80% pakai static (default). 15% relative buat anchor absolute child. Sisanya fixed/sticky/absolute di kasus spesifik.

Position — CSS

🎭 Analogi sehari-hari

⚠️ Jebakan yang sering ditemui

Yang akan kamu pelajari

HyperSheets