CSS · Bab 5
Display, Position, dan Overflow
Membedakan elemen block, inline, inline-block, dan none, memosisikan elemen dengan relative, absolute, fixed, dan sticky, mengatur tumpukan dengan z-index, serta menangani isi yang meluap dengan overflow.
Box model menjelaskan ukuran satu kotak. Bab ini menjelaskan bagaimana kotak-kotak itu disusun: berjajar atau bertumpuk, bergeser dari tempatnya, menempel saat digulir, dan apa yang terjadi bila isinya tidak muat.
5.1 display: block, inline, inline-block, dan none
| Nilai | Perilaku | Contoh elemen bawaan |
|---|---|---|
display: block | mulai di baris baru, selebar induknya; width, height, dan semua margin berlaku | div, p, h1, section |
display: inline | mengalir di dalam baris teks; width dan height diabaikan, margin atas-bawah diabaikan, dan padding atas-bawah tidak mendorong baris lain | span, a, strong |
display: inline-block | tetap sebaris, tetapi width, height, dan jarak atas-bawah berlaku | label, lencana, tombol |
display: none | dihapus dari tata letak dan tidak dibacakan pembaca layar | (tidak ada) |
visibility: hidden juga menyembunyikan elemen, tetapi ruangnya tetap ada.
🧪 Coba ubah: ganti display: none pada .hilang menjadi display: inline.
Belum ada output.
5.2 position: relative dan position: absolute
position: staticadalah bawaan. Elemen berada di aliran normal, dantop,right,bottom,lefttidak berpengaruh.position: relativemenggeser elemen dari tempat normalnya, tetapi ruang aslinya tetap disisakan. Biasanya dipakai sebagai patokan bagi anak yangabsolute.position: absolutemengeluarkan elemen dari aliran (elemen lain menutup ruangnya), lalu memosisikannya terhadap leluhur terdekat yang ber-position selainstatic. Bila tidak ada, patokannya adalah halaman.
🧪 Coba ubah: hapus position: relative dari .kartu. Lencana kini berpatokan pada halaman dan pindah ke pojok kanan atas preview dan sebagiannya keluar dari tepi atas preview.
Belum ada output.
5.3 position: fixed dan position: sticky
position: fixedmemosisikan elemen terhadap viewport (area halaman yang terlihat), sehingga elemen tetap di tempat saat halaman digulir. Contohnya tombol obrolan di pojok layar. Di playground, viewport adalah kotak preview.position: stickyberperilaku normal sampai wadah gulirnya digulir melewati batas yang ditentukan (misalnyatop: 0), lalu menempel di sana selama induknya masih terlihat. Nilaitop(atau sisi lain) wajib ditulis.
🧪 Coba ubah: gulir kotak daftar. Judul rak menempel di atas sampai judul berikutnya menutupinya. Tombol “Bantuan” tetap di pojok kanan bawah preview.
Belum ada output.
5.4 z-index
Bila elemen ber-position saling menimpa, z-index menentukan mana yang di atas: nilai lebih besar tampil lebih depan. z-index hanya berpengaruh pada elemen yang ber-position (bukan static) dan pada item flex atau grid (bab 6 dan 7). Tanpa z-index, elemen yang ditulis belakangan tampil di atas.
🧪 Coba ubah: hapus z-index: 1 dari .merah. Biru kini di atas karena ditulis belakangan.
Belum ada output.
z-index setinggi apa pun tidak selalu menang: bila induknya membentuk lapisan tumpukan sendiri (stacking context), anak hanya bersaing di dalam lapisan induknya.
5.5 overflow
Bila isi lebih besar dari kotaknya, overflow menentukan apa yang terjadi:
visible(bawaan): isi meluber keluar kotak.overflow: hidden: isi yang tidak muat dipotong dan tidak terlihat. Hati-hati, isi penting bisa ikut hilang.scroll: bilah gulir selalu disediakan (di sebagian sistem, bilah gulir baru tampil saat digulir).overflow: auto: bilah gulir muncul hanya bila perlu. Biasanya pilihan terbaik.
overflow-x dan overflow-y mengatur arah mendatar dan tegak secara terpisah, misalnya untuk tabel lebar yang digulir ke samping di ponsel.
Belum ada output.
5.6 Ringkasan
displaymenentukan cara kotak mengalir:block,inline,inline-block, ataunone.visibility: hiddenmenyembunyikan tanpa menghapus ruang.position:static(bawaan),relative(geser, ruang tetap),absolute(terhadap leluhur ber-position),fixed(terhadap viewport),sticky(menempel saat digulir).z-indexmengatur tumpukan elemen ber-position.overflowmengatur isi yang tidak muat.autobiasanya pilihan terbaik.