Pernahkah kalian melihat elemen yang tampak saling bertumpukan, melayang, atau tampak keluar dari garis batas? Itu semua dibuat menggunakan CSS Position Seperti : Static, Relative, Absolute dan Fixed. Selain deklarasi posisi, terdapat pula beberapa properti yang biasanya dituliskan bersama dengan deklarasi posisi seperti top, right, bottom, left dan z-index.
Top, right, bottom dan left adalah koordinat posisi. Saat kita menambahkan nilai koordinat pada posisi yang sesungguhnya, maka elemen akan bergeser sesuai dengan besar nilai koordinat. Top, right, bottom dan left berbeda dengan margin-top, margin-right, margin-bottom dan margin-left. Nilai margin difokuskan kepada jarak elemen terhadap elemen lainnya, sedangkan nilai koordinat lebih difokuskan kepada offset posisi elemen dari tempat asalnya.
Z-index adalah urutan tumpukan. Saat kita mendeklarasikan position:absolute, maka kemungkinan yang terjadi adalah elemen akan bertumpuk di sebelah atas elemen atau di bawah elemen. Jika yang terjadi adalah yang ke dua, maka untuk mengangkatnya, kita harus mendeklarasikan z-index dengan nilai yang lebih besar dari 1.
Beberapa istilah lain yang harus diketahui adalah seperti selector (selektor) , property (properti) , value (nilai) dan deklarasi. Untuk memahaminya, perhatikan CSS ini :
.box{position:relative}.box adalah Selector (bagian atau elemen yang ingin kita atur stylenya)
position adalah Property (komponen yang kita butuhkan)
relative adalah Value/Nilai dari Property
Deklarasi adalah bagian yang ada di dalam {} yaitu properti dan nilai.
Value atau Nilai dari CSS position adalah :
1. static ditulis position:static
2. relative ditulis position:relative
3. absolute ditulis position:absolute
4. fixed ditulis position:fixed
5. inherit ditulis position:inherit
position:static
Posisi ini merupakan posisi default suatu elemen (statis). Tataletaknya seperti div biasa. Pada posisi ini top, right, bottom dan left tidak akan berpengaruh, contoh :Pada contoh di atas, saya menerapkan properti top dan left pada DIV2 dan DIV3 (klik pada CSS dan HTML pada demo untuk lebih memahmi kode), dan ini tidak berpengaruh sama sekali, karena membentuk pola vertikal (garis baru ke bawah). Pada kondisi ini apabila si hijau ingin berjejer dengan merah maka keduanya harus ditambahkan float:left
position:relative
Posisi inilah yang sering digunakan, pada posisi ini kita bisa memanfaatkan properti top dan left. Objek akan berubah posisi terhadap elemen utama, dan juga relativ terhadap dirinya.Berbeda dengan position:static, dengan menerapkan position:relative kita bisa merubah posisi elemen seperti yang kita inginkan
position:absolute
Dengan menerapkan position:absolute, maka objek akan mengikuti parent (induk elemen) dengan catatan induk elemen harus menggunakan position:relativePosisi si merah tidak akan lari kemana-mana karena background (si hitam) menggunakan position:relative. Intinya position:relative merupakan pagar dari anak yang diberi position:absolute supaya ga kabur.
Position Absolute terhadap Layar
Apabila si hitam tanpa position:relative maka si merah akan menyesuaikan dengan layar. Untuk lebih jelasnya, lihat contoh DISINIposition:fixed
Posisi ini hampir sama dengan position:absolute, akan tetapi perbedaannya position:fixed akan selalu pada posisinya walaupun browser di scroll. Contohnya saya gabung dengan position:absolute terhadap layar (contoh atas).position:inherit
Posisi ini akan mengikuti posisi pada elemen iduk. Apabila elemen induk mempunyai position:absolute maka elemen didalamnya apabila diberi properti position dengan value inherit, maka hasilnya menjadi position:absolute (mengikuti elemen induk).Sumber : http://blog.kangismet.net/2013/11/css-position-property-dan-valuenya.html
http://www.proweb.co.id/articles/web_design/css_position_static_absolute_relative_fixed.html
http://santa-mars.blogspot.co.id/2013/03/css-position.html