Belajar Tentang CSS Position Property dan Valuenya
Untuk menentukan posisi objek terhadap objek lain, atau objek terhadap browser, perlu pemahaman tentang CSS Position. Oleh karena itu saya akan coba menjelaskan Apa itu CSS Position dan bagaimana cara kerja properti dari CSS Position ini.

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:relative

Posisi 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 DISINI

position: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).

Source & Thanks To:
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
0 Komentar untuk "Belajar Memahami CSS Position Property dan Valuenya"