CSS: Floating and Positioning

Mata kuliah web development kali ini membahas tentang properti FLOATING dan POSITIONING. Dimana kedua properti tersebut berguna untuk mengatur tata letak elemen-elemen html. Di sini saya akan share sedikit yang saya pahami dari masing-masing elemen tersebut.

Float, merupakan elemen yang berguna mengatur posisi elemen html secara horizontal yang berpatokan pada elemen-elemen yang membungkusnya, entah itu DIV, Table, Browser dan yang lain. Seperti yang sudah saya katakan sebelumnya, elemen ini hanya dapat mengatur posisi secara horizontal, sehingga hanya memiliki empat buah nilai yang bisa dipakai yaitu: LEFT, RIGHT, NONE dan INHERIT. Untuk mengetahui kegunaan dari masing-masing nilai silakan langsung coba misal:

float: left; //atau yang lain

Cara kerja elemen ini adalah mengambangkan secara horizontal jika diartikan dalam bahasa Indonesia. Jika di sebelah kiri elemen float ada elemen float lainnya, secara otomatis elemen float yang kedua akan bergeser di samping elemen float pertama selama jendela browser masih cukup, jika jendela browser tidak mencukupi maka dengan terpaksa elemen float kedua akan bergeser di bawah elemen float pertama. Ini yang biasa digunakan untuk membuat menu :).

Positioning, mirip dengan float yang membedakan hanyalah penempatan elemen, jika dengan float kita hanya dapat membuat elemen html saling berdampingan, dengan positioning kita dapat membuat elemen html untuk saling tindih. Ada beberapa nilai yang dapat digunakan dalam properti positioning yaitu:

• Static, menempatkan elemen html sesuai defaultnya, tidak ada yang ‘nyeleneh‘.
• Fixed, menempatkan elemen html relatif dengan browser, tidak akan ikut bergeser ketika kita lakukan scroling pada browser. Elemen dengan position fixed akan mengubah default html. Elemen ini dapat menindih elemen yang lain. Sebagai catatan, untuk browser IE7 dan IE8 tidak mendukung elemen ini jika tidak dideklarasikan !DOCTYPE.
• Relative, menempatkan elemen html pada posisi normal. Elemen position dengan nilai relative dapat berpindah dan menindih elemen yang lain. 
• Absolute, menempatkan elemen secara relatif terhadap elemen induk / bungkus utama kecuali elemen dengan position static.

Overlapping, menempatkan elemen html seperti layaknya layer. Overlapping sendiri bukan termasuk nilai dari properti Positioning, namun berguna untuk mengatur dimana kita meletakkan sebuah elemen entah itu di depan, di belakang. Untuk menggunakannya setelah positioning gunakan syntax

z-index:-1

Nilai pada properti ini dapat berupa positif maupun negatif

Berikut ada beberapa percobaan yang sudah saya lakukan terkait floating dan positioning. Mungkin dapat dipelajari.

Download Percobaan Floating dan Positioning

Sedangkan untuk file tugas yang dapat di download pada link diatas, nantinya akan tampak seperti ini