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

Mengendalikan Tata Letak Tanpa Flexbox

Saat membuat desain website, terkadang kita butuh meletakkan tombol *Chat WhatsApp* yang selalu melayang di pojok kanan bawah, atau membuat *Navbar* yang menempel saat di-scroll. Untuk kasus seperti ini, kita tidak menggunakan Margin atau Flexbox, melainkan properti CSS Position.

1. Position: Static (Sifat Bawaan)

Ini adalah posisi default (bawaan) semua elemen HTML. Elemen akan berbaris normal dari atas ke bawah. Pada posisi ini, perintah top, bottom, left, atau right tidak akan berfungsi sama sekali.

2. Position: Relative (Bergeser dari Posisi Awalnya)

Jika kamu memberi elemen position: relative;, elemen tersebut tetap berada di alur normal, TAPI sekarang kamu bisa menggesernya menggunakan top atau left.

Misalnya kamu memberi top: 20px;. Elemen itu akan turun 20px dari posisi awalnya, tanpa merusak atau mendorong elemen lain di sekitarnya (elemen lain akan menganggap dia masih di tempat aslinya).

3. Position: Absolute (Terbang dan Menempel pada Induk)

Ini yang paling sering membuat pemula bingung. Jika sebuah elemen diberi position: absolute;, elemen itu akan "terbang" keluar dari alur dokumen dan bisa menimpa elemen lain.

Aturan Emas Absolute: Elemen absolute akan bergerak mencari elemen induk (pembungkusnya) yang memiliki posisi Relative. Jika ketemu, dia akan menjadikan induk itu sebagai titik kordinat nol-nya.

/* Sang Induk */
.kartu-profil {
  position: relative;
}

/* Sang Anak (Misal: Ikon Centang Biru) */
.ikon-centang {
  position: absolute;
  top: -10px;
  right: -10px;
}

4. Position: Fixed (Menempel pada Layar Kaca)

Berbeda dengan Absolute yang mencari induk, elemen fixed hanya peduli pada layar monitor/HP pengguna (Viewport). Walaupun halamannya kamu scroll sampai ke paling bawah, elemen fixed tidak akan ikut ter-scroll. (Contoh: Tombol "Back to Top" atau ikon Chat melayang di pojok kanan).

5. Position: Sticky (Perpaduan Relative dan Fixed)

Ini adalah fitur modern yang luar biasa. Elemen sticky akan bertingkah seperti elemen biasa (ikut ter-scroll). TAPI, ketika ia menyentuh batas layar atas (misal diberi top: 0;), ia mendadak berubah menjadi Fixed dan menempel di atap layar selama kamu menscroll ke bawah. Sangat cocok untuk membuat Sticky Header atau Daftar Isi Artikel.