Static Positioning

Setiap elemen yang kita tulis sejauh ini sesungguhnya membawa satu nilai position yang sama, meskipun kita tidak pernah menuliskannya: static. Inilah titik awal section Positioning — sebelum menggeser dan menumpuk elemen, kita wajib tahu persis bagaimana elemen berperilaku ketika tidak diatur sama sekali. Pada chapter ini kita membedah nilai default tersebut, membuktikan dua kelompok property yang diam-diam diabaikan padanya, dan memahami mengapa “tidak melakukan apa pun” justru menjadi fondasi bagi semua teknik positioning berikutnya.

Static Adalah Nilai Default #

Elemen dengan position: static tidak diberi perlakuan positioning khusus. Browser menyusunnya murni lewat normal flow: kotak block menumpuk vertikal, kotak inline mengalir menyamping, persis seperti yang dibahas pada section Display dan Normal Flow. Kita boleh menuliskannya secara eksplisit, misalnya untuk mengembalikan nilai dari aturan lain:

.konten-artikel {
  position: static; /* nilai default — biasanya tidak perlu ditulis */
}

Karena static berarti “ikuti alur”, mayoritas konten halaman sesungguhnya tidak membutuhkan position sama sekali. Property ini baru masuk percakapan ketika kita ingin elemen menyimpang dari alurnya — dan setiap penyimpangan itu didefinisikan relatif terhadap baseline static.

Dua Kelompok Property yang Tidak Berefek #

Fakta kunci chapter ini: pada elemen static, keempat property offset dan z-index sama sekali tidak berpengaruh.

Kotak A membawa top, left, dan z-index bernilai besar tetapi tetap static, sedangkan Kotak B dirender setelahnya tanpa deklarasi positioning apa pun:

Kedua deklarasi itu diabaikan karena Kotak A masih static, sedangkan Kotak B menang murni karena muncul lebih akhir dalam urutan dokumen.

Mekanismenya memang dirancang demikian oleh spesifikasi: offset dan z-index hanya berlaku pada elemen yang disebut positioned, yaitu elemen dengan nilai position selain static. Nilai static adalah sinyal “tidak ada offset yang diminta”, sehingga browser berhak mengabaikan nilai-nilai tersebut tanpa peringatan apa pun.

Inilah sumber gejala debug klasik: seorang developer memberi top: 20px pada sebuah div, div itu tidak bergeser, dan tidak muncul error. CSS tidak rusak — elemennya masih static, sehingga deklarasi offset hanya duduk terabaikan. Aturan praktisnya: sebelum menyalahkan nilai offset, periksa dulu nilai position-nya.

Istilah Kunci: Positioned #

Kata positioned akan muncul terus-menerus sepanjang section ini, jadi pastikan definisinya menempel. Sebuah elemen disebut positioned bila nilai position-nya salah satu dari berikut:

Static satu-satunya yang tidak termasuk — dan justru karena itu ia mengabaikan offset serta z-index. Bila membaca artikel atau dokumentasi berbahasa Inggris, frasa “only works on positioned elements” selalu bermakna: empat nilai di atas, static tidak termasuk.

Mengapa Default Ini Penting #

Static bukan sekadar “belum diatur” — nilai ini adalah baseline yang membuat seluruh nilai position lain bisa dijelaskan dengan rapi:

• Acuan pembanding: relative diartikan sebagai pergeseran dari posisi static, dan absolute memakai posisi static sebagai titik berangkat ketika offset tidak ditulis. Tanpa memahami baseline, definisi-definisi itu terasa sewenang-wenang.
• Sinyal niat: begitu kita menulis position selain static, kita sengaja menyimpang dari alur. Pembaca kode dapat mengandalkan kebalikannya juga — selama tidak ada position, layout dijamin mengikuti normal flow yang prediktabel.
• Jalur diagnosis pertama: inset dan z-index yang “tidak jalan” hampir selalu bermuara pada satu pertanyaan — apakah elemennya sudah positioned?

Kesalahan Umum #

Ringkasan #

Static adalah nilai default position: elemen mengikuti normal flow sepenuhnya, dan top, right, bottom, left serta z-index tidak berpengaruh padanya. Fakta ini menjelaskan banyak gejala debug sekaligus menjadikan static sebagai baseline untuk memahami nilai lainnya. Chapter berikutnya membahas relative — pergeseran visual kecil dari posisi static yang ruang alurnya tetap dipertahankan, sekaligus persiapan paling sering dipakai untuk menampung elemen absolute.