Mengatur Posisi/Position Menggunakan CSS

Mengatur Posisi Objek Menggunakan CSS Dengan Benar
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

Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.

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 }