Monday, July 9, 2012

CSS Positioning

Belajar CSS (lagi), setelah sekian lama ga megang-megang ni bocah..

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.
Code:
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.
Code:

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.

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:

img

{

position:absolute;

left:0px;

top:0px;

z-index:-1

}

CONTOH:
Berikut contoh satu page yang pake positioning CSS.





1 komentar:

Frits Hendrico Tarihoran said...
This comment has been removed by the author.

Post a Comment

 
Design by Frits Hendrico Tarihoran | Bloggerized by fritshendrico - Premium Blogger Themes | Revivalist, History Maker