Positioning memungkinkan kita meletakkan elemen di titik tertentu, membuat badge di sudut kartu, header yang menempel, hingga overlay. Section ini membahas setiap nilai position, properti inset, serta aturan stacking context dan z-index yang sering mengejutkan.

# Position Static dan Relative

Kenali dua nilai position paling dasar, static dan relative, beserta cara properti offset menggeser elemen dari posisi normalnya.

Buka → # Absolute Positioning

Pahami cara position absolute mengeluarkan elemen dari alur dokumen dan menempatkannya berpatokan pada ancestor positioned terdekat.

Buka → # Fixed Positioning

Pelajari position fixed yang berpatokan pada viewport, tidak ikut bergulir, beserta jebakan transform pada ancestor.

Buka → # Sticky Positioning

Gunakan position sticky untuk header yang menempel saat digulir dan pahami syarat inset serta batas parent yang mengikatnya.

Buka → # Inset Properties

Kuasai properti offset top, right, bottom, left, shorthand inset, serta inset logis untuk penempatan elemen positioned.

Buka → # Stacking Context

Pahami stacking context: lingkup urutan menggambar elemen, daftar properti pembentuknya, dan cara men-debug urutan lapisan.

Buka → # Z-index

Atur urutan tumpukan elemen dengan z-index: syarat berlakunya, perilaku nilai negatif, dan praktik penataan yang sehat.

Buka → # Positioning Patterns

Kumpulkan resep positioning yang siap pakai: badge, tooltip, overlay modal, header sticky, dan skip link.

Buka →