CSS 07: Position Relative, Absolute, Fixed, dan Sticky

Gunakan alur normal, Flexbox, atau Grid untuk layout utama. Gunakan position untuk kebutuhan khusus seperti badge, header lengket, dan tombol melayang.

1. Demo Position Lengkap

2. Memahami Acuan Posisi

• static adalah nilai bawaan; koordinat tidak memindahkannya.
• relative mempertahankan ruang asal dan dapat menjadi acuan.
• absolute keluar dari alur normal dan mengikuti leluhur terdekat yang tidak static.
• fixed menempel pada viewport.
• sticky bergerak bersama halaman lalu menempel pada batas seperti top: 0.

Pola parent: relative dan child: absolute terlihat pada kartu dan badge.

3. z-index

z-index mengatur urutan lapisan. Nilai besar tidak selalu menyelesaikan masalah karena beberapa property dapat membuat konteks tumpukan baru. Mulailah dengan skala kecil seperti 1, 10, dan 20.

Kesalahan yang Sering Terjadi

• Menggunakan absolute untuk menyusun seluruh halaman.
• Lupa memberi position: relative pada elemen acuan.
• Memakai sticky tanpa koordinat seperti top.
• Memberi z-index sangat besar tanpa memahami induknya.
• Membuat elemen fixed menutupi konten pada ponsel.

Latihan

Scroll contoh untuk menguji sticky dan fixed. Pindahkan badge ke kiri bawah, lalu hapus position: relative dari kartu dan amati perubahan acuannya.

Ringkasan

Position berguna untuk penempatan khusus, bukan layout utama. Selalu pahami acuan posisi dan dampaknya terhadap alur normal.