Section ini membahas positioning sebagai bagian dari Course CSS. Ikuti chapter di dalamnya secara berurutan karena setiap chapter dibangun di atas pemahaman chapter sebelumnya. Gunakan demo interaktif pada setiap halaman untuk melihat langsung efek kode yang sedang dibahas.

# Static Positioning

Kenali position: static sebagai titik awal semua elemen dan pahami mengapa top, left, dan z-index tidak berefek padanya.

Buka → # Relative Positioning

Geser elemen secara visual dari posisi alurnya tanpa mengganggu elemen lain, dan kenali relative sebagai jangkar utama bagi anak absolute.

Buka → # Absolute Positioning

Lepaskan elemen dari alur dokumen dan tempelkan ke jangkar tertentu — pola badge, notifikasi, dan label menempel.

Buka → # Fixed Positioning

Tempelkan elemen ke viewport agar tetap diam saat halaman di-scroll — banner cookie, tombol aksi melayang, dan widget obrolan.

Buka → # Sticky Positioning

Nilai hybrid yang mengalir seperti biasa lalu menempel saat ambang scroll tercapai — header grup dan baris kepala tabel yang selalu terlihat.

Buka → # Inset Properties

Rampingkan empat offset menjadi satu shorthand inset, kuasai perilaku auto, dan rakit overlay penuh layar dalam tiga baris.

Buka → # Z-Index

Atur siapa yang tampil di atas saat elemen positioned bertumpuk — mulai dari urutan dokumen, syarat z-index, hingga skala angka yang wajar.

Buka → # Stacking Context

Pahami lingkup isolasi di balik z-index: siapa pembentuknya, mengapa 999 bisa kalah dari 1, dan bagaimana isolation: isolate menjadi pagar aman.

Buka → # Containing Block

Jawab pertanyaan dihitung relatif terhadap apa: tabel acuan per nilai position, persentase yang butuh ukuran pasti, dan transform yang mencuri jangkar.

Buka → # Contoh Positioning

Satukan seluruh section menjadi tiga pola nyata — caption overlay, tooltip, dan header tabel tempel — plus tabel keputusan memilih nilai position.

Buka →