Dasar-dasar CSS: posisi dan float

CSS menyediakan properti untuk positioning dan floating yang memungkinkan Anda membuat tata letak kolom, tumpang tindih satu bagian tata letak dengan bagian lainnya, dan menyelesaikan tugas yang selama bertahun-tahun sering kali memerlukan penggunaan beberapa tabel.
Ide dasar pemosisiannya sederhana, ini memungkinkan Anda menentukan di mana kotak elemen akan muncul relatif terhadap posisi normalnya, atau relatif terhadap elemen induk, elemen lain, atau bahkan jendela browser itu sendiri. Tentu saja fitur ini sangat kuat dan mengejutkan. Seharusnya tidak mengherankan mengetahui bahwa agen pengguna mendukung pemosisian di CSS2 jauh lebih baik daripada aspek lainnya.
Float, di sisi lain, pertama kali diperkenalkan di CSS1 dan didasarkan pada fitur yang ditambahkan oleh Netscape pada masa awal Web. Mengambang bukanlah posisi yang tepat, tapi jelas juga bukan tata letak aliran yang normal. Kami akan memperjelas arti float di bab selanjutnya.

semuanya adalah bingkai

Elemen div, h1, atau p sering disebut elemen level blok. Ini berarti bahwa elemen-elemen ini muncul sebagai blok konten, sebuah "kotak blok". Sebaliknya, elemen seperti span dan strong disebut "elemen inline" karena kontennya muncul dalam satu baris, sebuah "kotak inline".
Anda dapat mengubah tipe kotak yang dihasilkan menggunakan properti display. Ini berarti Anda dapat membuat elemen sebaris (seperti elemen <a>) berperilaku seperti elemen tingkat blok dengan menyetel properti tampilan ke blok. Anda juga dapat mengatur display ke none sehingga elemen yang dihasilkan tidak memiliki kotak sama sekali. Dengan cara ini, kotak dan seluruh isinya tidak lagi terlihat dan tidak memakan ruang di dokumen.
Namun dalam satu kasus, elemen tingkat blok dibuat bahkan tanpa definisi eksplisit. Ini terjadi ketika Anda menambahkan beberapa teks ke awal elemen tingkat blok (seperti div). Meskipun teks tersebut tidak didefinisikan sebagai paragraf, teks tersebut akan diperlakukan sebagai berikut:


Dalam hal ini, kotak tersebut disebut kotak blok tanpa nama karena tidak terkait dengan elemen yang ditentukan secara spesifik.
Hal serupa terjadi dengan baris teks untuk elemen tingkat blok. Misalkan Anda memiliki paragraf yang berisi tiga baris teks. Setiap baris teks membentuk kotak tanpa nama. Anda tidak bisa langsung menerapkan gaya ke blok tanpa nama atau kotak garis karena tidak ada tempat untuk menerapkan gaya (perhatikan bahwa kotak garis dan kotak sebaris adalah dua konsep yang berbeda). Namun, ada baiknya untuk memahami bahwa semua yang Anda lihat di layar membentuk semacam kotak.

Mekanisme penentuan posisi CSS

CSS memiliki tiga mekanisme penentuan posisi dasar: aliran normal, float, dan penentuan posisi absolut.
Semua kotak diposisikan dalam aliran normal kecuali ditentukan lain. Artinya, posisi suatu elemen dalam aliran normal ditentukan oleh posisi elemen dalam X(HTML).
Kotak tingkat blok disusun satu demi satu dari atas ke bawah, dan jarak vertikal antar kotak dihitung dari margin vertikal kotak.
Kotak sebaris disusun secara horizontal dalam satu baris. Jaraknya dapat disesuaikan menggunakan bantalan horizontal, batas, dan margin. Namun, padding vertikal, batas, dan margin tidak mempengaruhi ketinggian kotak sebaris. Kotak horizontal yang dibentuk oleh sebuah garis disebut kotak garis. Ketinggian kotak garis selalu cukup tinggi untuk menampung semua kotak sejajar yang dikandungnya. Namun, mengatur tinggi baris dapat menambah tinggi kotak ini.
Di bawah ini kami akan menjelaskan positioning relatif, positioning absolut, dan floating secara detail.

Properti posisi CSS

Dengan menggunakan properti position kita dapat memilih antara 4 tipe pemosisian yang berbeda, yang mempengaruhi bagaimana kotak elemen dihasilkan.
Arti dari nilai atribut posisi :
statis
Kotak elemen dihasilkan secara normal. Elemen tingkat blok membuat kotak persegi panjang sebagai bagian dari alur dokumen, sedangkan elemen inline membuat satu atau lebih kotak garis yang ditempatkan di dalam elemen induknya.
relatif
Kotak elemen diimbangi dengan jarak tertentu. Elemen tersebut mempertahankan bentuk yang tidak diposisikan dan ruang yang awalnya ditempati.
mutlak
Kotak elemen sepenuhnya dihapus dari aliran dokumen dan diposisikan relatif terhadap blok yang memuatnya. Blok penampung dapat berupa elemen lain dalam dokumen atau blok penampung awal. Ruang yang sebelumnya ditempati oleh elemen dalam aliran dokumen normal ditutup, seolah-olah elemen tersebut tidak ada. Elemen tersebut menghasilkan kotak tingkat blok setelah diposisikan, terlepas dari jenis kotak apa yang awalnya dihasilkan dalam aliran normal.
tetap
Kotak elemen berperilaku seperti menyetel posisi ke absolut, kecuali blok yang memuatnya adalah area pandang itu sendiri.
Tip: Penempatan relatif sebenarnya dianggap sebagai bagian dari model penentuan posisi aliran normal, karena posisi suatu elemen relatif terhadap posisinya dalam aliran normal.

Properti pemosisian CSS

Properti pemosisian CSS memungkinkan Anda memposisikan elemen.
Deskripsi Properti
position menempatkan elemen ke posisi statis, relatif, absolut, atau tetap.
top mendefinisikan offset antara batas margin atas elemen yang diposisikan dan batas atas blok yang memuatnya.
right mendefinisikan offset antara tepi margin kanan elemen yang diposisikan dan tepi kanan blok yang memuatnya.
bottom mendefinisikan offset antara batas margin bawah elemen yang diposisikan dan batas bawah blok yang memuatnya.
left mendefinisikan offset antara tepi margin kiri elemen yang diposisikan dan tepi kiri blok yang memuatnya.
overflow mengatur apa yang terjadi ketika konten suatu elemen melebihi areanya.
klip mengatur bentuk elemen. Elemen tersebut dipotong ke dalam bentuk ini dan kemudian ditampilkan.
vertical-align mengatur perataan vertikal suatu elemen.
z-index mengatur urutan penumpukan elemen.