css-logoHallo teman-teman, apa kabarnya ? semoga baik-baik saja yah, amin.

pada kesempatan kali ini, saya akan membahas mengenai floating dan positioning pada CSS, nah teman tau apa itu floating atau positioning ? daripada teman-teman bingung dan penasaran langsung saja saya jelaskan keduanya, silahkan simak penjelsan berikut.

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:

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.
  • 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

Nilai pada properti ini dapat berupa positif maupun negatif

Nah itulah penjelasan mengenai floating dan positioning pada CSS, baiklah cuup sekian penjelasan kali ini, semoga teman-teman bisa faham dan bisa bermanfaat, sampai ketemu dilain kesempatan 🙂