Belajar CSS Positioning

Belajar CSS tidaklah sulit kalau kita mempelajarinya secara bertahap. Setelah mempelajari kode-kode css dasar, kita sekarang melanjutkan ketahap css yang lebih advance. Materi berikutnya kita akan belajar css positioning dan floating. Dimana kedua properti tersebut berguna untuk mengatur tata letak elemen-elemen html. Di sini saya akan share dari masing-masing elemen tersebut.

Property css positioning dan float merupakan elemen yang berguna mengatur posisi elemen.

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 empat metode penentuan posisi yang berbeda. yaitu:

Static Positioning

Elemen HTML statis diposisikan secara default. statis tidak terpengaruh oleh bagian atas, bawah, kiri, dan kanan

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.

Contoh kode :

?

1 2 3 4 5 6 7 8 9 10 11

p.pos_fixed   {   position:fixed;   top:30px;   right:5px;   }

Relative

menempatkan elemen html pada posisi normal. Elemen position dengan nilai relative dapat berpindah dan menindih elemen yang lain.

Contoh Kode :

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

h2.pos_left   {   position:relative;   left:-20px;   }   h2.pos_right   {   position:relative;   left:20px;   }

Absolute

menempatkan elemen secara relatif terhadap elemen induk / bungkus utama kecuali elemen dengan position static.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

h2   {   position:absolute;   left:100px;   top:150px;   }   [css]   <strong>Overlapping</strong>, menempatkan elemen html seperti layaknya layer. Ketika posisi elemen diluar arus, elemen tersebut dapat overlap elemen yang lain. 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   [css]   z-index:-1 Nilai pada property ini dapat berupa positif atau negative. Contoh kode : ? 1 2 3 4 5 6 7 8 9 10 11 12 13 img   {   position:absolute;   left:0px;   top:0px;   z-index:-1   }