Normalnya, elemen di halaman tersusun satu setelah yang lain, dari atas ke bawah, kayak orang antre. Susunan ini disebut alur normal. Properti position mengubah cara sebuah elemen ditempatkan: digeser sedikit dari tempatnya, dikeluarkan dari antrean, atau ditempel di layar.
🧪 Tebakan cepat:
left: 75pxbikin kotak geser ke kiri atau ke kanan? Tebak dulu, jawabannya ada di bagian "Geser kotak dengan relative".
Geser kotak dengan relative
<div class="kotak"></div>
<style>
.kotak {
position: relative;
top: 20px;
left: 40px;
}
</style>
position: relative;artinya "kotak ini boleh digeser dari tempat aslinya". Tanpa baris ini,topdanleftgak ngaruh apa-apa.top: 20px;artinya "beri jarak 20px dari sisi atas tempat aslinya". Kotaknya turun 20px.left: 40px;artinya "beri jarak 40px dari sisi kiri tempat aslinya". Kotaknya geser ke kanan 40px.
Bayangin kamu mendorong kotak dari sisi yang kamu sebut: top mendorong dari atas, jadi kotaknya turun. left mendorong dari kiri, jadi kotaknya ke kanan. Itu jawaban tebakannya: ke kanan. Mau ke kiri atau naik? Pakai right atau bottom.
Tempat asli kotaknya tetap dijaga, jadi elemen lain gak ikut bergeser. Tiap baris ditulis nama properti, satu titik dua, angka dengan satuan px, lalu titik koma: top: 50px;.
Lima nilai position
static: nilai bawaan setiap elemen. Ikut alur normal, dantopatauleftgak berpengaruh.relative: tetap di alur normal, tapi bisa digeser dari tempat aslinya.absolute: keluar dari alur, jadi tempatnya diisi elemen berikutnya. Posisinya diukur dari induk terdekat yangposition-nya bukanstatic. Kalau gak ada induk seperti itu, ukurannya dari halaman itu sendiri, dan elemennya ikut tergulir bersama halaman. Makanya induknya biasanya diberiposition: relative.fixed: keluar dari alur dan diukur dari layar, jadi tetap di tempat walau halaman di-scroll. Satu pengecualian: kalau salah satu induknya punyatransform(ataufilter), induk itu jadi patokan barunya, dan elemen fixed ikut tergulir bersamanya.sticky: ikut alur normal sampai jaraknya ke atas layar tinggal sebesartop, lalu nempel di situ.
Contoh absolute, label di pojok kanan atas sebuah kartu: .kartu { position: relative; } lalu .label { position: absolute; top: 0; right: 0; }.
⚠️ Jebakan yang sering ketemu
- Menggeser pakai
margin.marginikut mendorong elemen lain. Buat menggeser satu kotak dari tempatnya, pakaiposition: relativedengantopdanleft. - Angka tanpa satuan.
top: 50diabaikan browser. Tulistop: 50px. - Dua titik dua.
top: : 50pxjuga diabaikan. Cukup satu:top: 50px. stickyyang gak nempel. Dia butuhtop, dan induknya gak bolehoverflow: hidden.
TL;DR: position menentukan cara elemen ditempatkan. static (bawaan) ikut alur biasa. relative menggeser dari tempat asli: top mendorong ke bawah, left mendorong ke kanan. absolute keluar dari alur dan diukur dari induk terdekat yang punya position (atau dari halaman kalau gak ada). fixed diukur dari layar dan gak ikut di-scroll. sticky ikut alur, lalu nempel.
