CSS Position : Mengatur posisi suatu elemen

Ketemu lagi dengan saya.. nah bagi yang lagi belajar Web Programming terutama yang berhubungan dengan CSS, kali ini ayo kita belajar mengatur posisi elemen menggunakan css. Untuk mengatur posisi elemen kita bisa menggunakan beberapa cara yaitu metode float, clear,  possition, & z-index.
ayo kita coba satu - satu...




1. Float
Seperti namanya "Float" jika diterjemahkan ke bahasa indonesia yang artinya "Mengapung", maka dalam penerapannya Elemen akan mengisi ruang yang tersedia ( div parent-nya ) bagian atas terlebih dahulu.
Cara ini bisa juga digunakan untuk membuat tampilan layaknya galeri.
cara menggunakan float bisa dituliskan :

div {
 float:left; float:right; 
}

-- kira kira digambarkan sbb

float possition

 2. Clear

Ini kebalikan dari metode float, jika float akan menempel ke atas elemen parent-nya, maka clear akan mengisi ruang dari bawah dahulu. penggunaan clear bisa dituliskan:

div {
 clear:left;
 clear:right;
 clear:both;
}

3. Possition

property possition ada 4 yaitu static, relative, absolute, dan fixed.

• static

 property static adalah property default dari suatu element, jadi ini bisa kita lewatkan.

• relative

jika suatu elemen diterapkan property relative , maka elemen tersebut akan berpindah relatif dari posisi normalnya. Berikut gambarnya

a. elemen ini diberi property:
 

div {
 position:relative;
 top:20px;
 left:40px;
}

b. elemen ini diberi property:

div {
 position:relative;
 top:20px;
 right:40px;
}

jadi seperti contoh diatas, maka bisa digambarkan elemen akan berpindah posisi 20px dari atas (top)
dan 40px dari kanan (right) terhadap elemen / div parent nya.

• absolute

 Selanjutnya jika kita menggunakan property absolute, yang jadi acuan adalah elemen paling luar ( body atau layar pc kita )

script gambar diatas

div {
 position:absolute;
 top:20px;
 right:40px;
}

seperti gambar diatas, elemen tersebut keluar dari elemen parent div nya, tetapi ber acuan pada layar(20px dari atas dan 40px dari kanan) .

• fixed

Lalu jika kita menerapkan posisi fixed pada suatu elemen, maka elemen tersebut akan diam atau tak terpengaruh oleh page scrolling (contohnya header dari facebook).

scriptnya :

position: fixed;

top:0;

 maka elemen akan menempel pada atas dokumen (tanpa jarak dari atas karena top:0).

• z-index

Menggunakan z-index akan membuat posisi elemen akan berada pada lapisan (kalo dalam potosop layer) lebih keatas, property ini berfungsi pada elemen yang berproperty fixed seperti header dari web page sehingga header tidak tertutup oleh dokumen web page saat di scroll.

Nah kiranya sekian dulu yang bisa saya sampaikan malam ini. Jika ada  kesalahan mohon komentarnya.