Position Static dan Relative

Secara bawaan, setiap elemen tersusun mengikuti alur dokumen (normal flow): elemen blok menumpuk dari atas ke bawah, dan teks mengalir mengisi lebar yang tersedia. Properti position menentukan kapan elemen boleh bergeser dari tempatnya atau keluar dari alur tersebut. Dari lima nilai yang tersedia, static dan relative adalah fondasinya: keduanya mempertahankan elemen di dalam alur, berbeda dari absolute, fixed, dan sticky yang kita bahas pada Chapter berikutnya. Pada Chapter ini kita mengamati perilaku keduanya melalui demo yang dapat dibuka langsung di browser.

Dua Nilai Paling Dasar #

static adalah nilai awal setiap elemen. Ketika kita tidak menulis properti position sama sekali, browser menata elemen murni mengikuti alur dokumen. relative tetap menempati slot yang sama di alur, tetapi membuka kemampuan menggeser tampilan elemen dengan properti offset top, right, bottom, dan left.

Perlu dicatat bahwa properti offset tidak berpengaruh pada elemen static. Kita dapat menulis top: 40px pada elemen statis tanpa melihat akibat apa pun di layar — pergeseran hanya terjadi pada elemen yang nilainya relative (atau nilai positioning lainnya).

Contoh: Menggeser Kotak dengan Relative #

Demo chapter ini menampilkan empat kotak berturut-turut: satu kotak statis yang diberi offset, satu kotak relatif yang digeser, satu kotak statis penanda posisi alur, dan satu kotak relatif dengan offset negatif. Berikut CSS inti yang dipakai demo tersebut:

.kotak-statis {
  position: static;
  top: 40px; /* diabaikan pada static */
}
.kotak-relatif {
  position: relative;
  top: 20px;
  left: 12px;
}
.kotak-naik {
  position: relative;
  top: -12px;
}

<div class="kotak-statis">Static — top 40px diabaikan</div>
<div class="kotak-relatif">Relative — turun 20px, kanan 12px</div>
<div class="kotak-setelah">Static — posisi alur tidak terdorong</div>
<div class="kotak-naik">Relative — naik 12px</div>

Hasil di Browser:

Kotak pertama tetap pada tempatnya: computed position: static dan
top 40px tidak berpengaruh apa pun. Kotak relatif tampil 20px lebih
bawah dan 12px lebih kanan dari posisi normalnya (computed top: 20px,
left: 12px). Kotak berikutnya tidak terdorong — kotak relatif
tumpang-tindih di atasnya karena ruang aslinya tetap terpakai. Kotak
terakhir naik 12px dari posisi normalnya (computed top: -12px).

Mari kita telaah aturan di atas baris demi baris:

1. Baris 2 (position: static): nilai ditulis eksplisit agar maksud demo terbaca jelas, padahal tanpa baris ini hasilnya identik karena static memang nilai awal.
2. Baris 3 (top: 40px): deklarasi ini tertulis pada elemen statis, tetapi browser mengabaikannya. Offset hanya bekerja pada elemen positioned.
3. Baris 5–7 (position: relative + top: 20px + left: 12px): kotak digambar 20px di bawah dan 12px di kanan tempat aslinya, sementara slotnya di alur tidak bergeser.
4. Baris 10–11 (top: -12px): nilai negatif membalik arah — kotak naik 12px. Offset negatif sepenuhnya sah digunakan pada relative.

Ruang Asli Tetap Terpakai #

Pergeseran pada relative terjadi setelah layout selesai. Browser menghitung posisi alur semua elemen terlebih dahulu, lalu menggambar kotak relatif pada posisi yang ter-offset. Akibatnya elemen lain tidak pernah terdorong: kotak relatif justru tumpang-tindih dengan elemen di sekitarnya, seperti yang terlihat pada demo ketika kotak relatif menutupi sudut atas kotak penanda di bawahnya.

Arah offset juga sering membingungkan pada awalnya. top menggeser kotak ke bawah dari posisi normal, dan bottom justru menggeser ke atas; left menggeser ke kanan, dan right menggeser ke kiri. Nilai positif pada top: 900px yang mendorong kotak melampaui tepi dokumen pun ikut memperluas area gulir halaman, sedangkan offset negatif ke atas atau ke kiri tidak menambah area gulir karena arah tersebut tidak memiliki ruang kosong.