Positioning: Mengendalikan Koordinat Elemen
Bagaimana cara membuat tombol "Bantuan" yang selalu menempel di pojok kanan bawah layar meskipun halamannya
di-scroll? Atau membuat menu navigasi (navbar) yang macet di atas saat kita membaca artikel?
Untuk mencapainya, kita harus memanipulasi posisi elemen agar keluar dari aliran normal dokumen (document
flow) menggunakan properti Position. Inilah 5 nilai ajaib yang akan memberimu kendali penuh
atas koordinat X dan Y di layarmu.
position (kecuali static), kamu akan membuka kunci
untuk menggunakan 4 properti koordinat ajaib:
top,
right,
bottom, dan
left
serta z-index (untuk menumpuk elemen
atas-bawah layaknya layer di Photoshop).
1. static (Default)
Ini adalah sifat bawaan setiap elemen HTML sejak ia dilahirkan. Elemen akan mengantre dan mengalir secara
alami dari atas ke bawah, kiri ke kanan sesuai urutan penulisan kode HTML-mu.
❌ Properti top, right, bottom, left TIDAK BERLAKU di
sini.
2. relative (Bergeser dari Titik Asal)
Secara fisik ia tetap menempati ruang aslinya (bertingkah persis seperti static). TAPI, bayangan aslinya (hantunya) tertinggal, sementara *wujud fisiknya* kini bisa digeser ke atas/bawah/kiri/kanan menggunakan koordinat tanpa merusak susunan elemen lain.
(Static)
top: 20px; left: 20px;
(Static)
Ruang (space) di tengah tetap terjaga seolah-olah kotaknya tidak pernah pergi.
3. absolute (Terbang Bebas)
Ini yang paling sering membuat pusing pemula. Elemen absolute akan dicabut
sepenuhnya dari antrean dokumen (document flow). Karena dicabut, elemen lain akan mengisi bekas
tempat duduknya.
Kotak ini sekarang terbang bebas. Ia akan memposisikan dirinya berdasarkan koordinat Bapak
Terdekatnya (Parent) yang tidak memiliki posisi static. Jika tidak ada, ia akan
berpegangan pada pojok layar browser utama (<html>).
bottom: -15px; right: -25px;
Pasangan Emas: Selalu jadikan Parent-nya "Relative" agar Anak "Absolute"-nya tidak kabur keluar kontainer!
4. fixed (Menempel di Kaca Layar)
Mirip dengan absolute (dicabut dari antrean). Bedanya, fixed selalu berpegangan pada
kaca viewport / layar monitor-mu. Sejauh apapun kamu men-scroll halaman ke bawah, elemen
ini tidak akan pernah ikut bergerak.
Sering digunakan untuk: Tombol WhatsApp mengambang di pojok kanan bawah, atau Navbar menu yang diam di atas.
Coba scroll kotak putih (browser abal-abal) di atas, ikon chat
tidak akan ikut jalan karena seolah-olah dia fixed
ke sudut kanan bawah layarnya.
5. sticky (Bunglon Relatif-Fixed)
Ini adalah jenis paling modern. Sticky awalnya berlaku seperti relative (mengalir biasa). TAPI, ketika kita
men-scroll layar dan posisi elemen tersebut menyentuh batas yang ditentukan (misal top: 0), ia tiba-tiba berubah sifat menjadi fixed (nyangkut di atap) sampai bapak kontainernya
habis di-scroll.
Scroll ke Bawah ↓
Paragraf pengantar berita olahraga terlaris.
Isi artikel paragraf pertama yang lumayan panjang menutupi layar...
Bisa dilihat, ketika "Judul Artikel Utama" menyentuh atap (top: 0), dia nyangkut.
Terus nyangkut....
Masih nyangkut membaca rentetan baris kode ini....
TAPI, begitu batas akhir dari kotak putus-putus kuning ini tercapai, dia akan lepas dan ikut ter-scroll ke atas!
Artikel lain di paling bawah layar yang jauh sekali.
📋 Cheat Sheet Positioning
| Nilai | Titik Tumpu (Jangkar) | Dicabut dari Antrean? |
|---|---|---|
| static | Alami (Default pabrik) | ❌ Tdk |
| relative | Dirinya sendiri (Titik asal/hantu) | ❌ Tdk |
| absolute | Bapak (Parent) terdekatnya, atau Layar (Html) | ✅ Ya |
| fixed | Kaca Layar Monitor (Viewport) | ✅ Ya |
| sticky | Batas layar SCROLL dari kontainernya | ❌ Tdk |