Memahami CSS Position Property dan Valuenya

CSS Positioning Property and it's Values - Pada tutorial sebelumnya saya menjelaskan cara membuat Notifikasi Komentar ala Google Plus, namun banyak pertanyaan tentang mengalihkan posisi atau banyak posisi yang tidak diinginkan.

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.

Sebelum melangkah kepada pembahasan, sebaiknya kita mengenal dulu istilah-istilah yang berhubungan dengan CSS. Beberap istilah yang harus diketahui adalah 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). Tata letaknya 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).

Semoga bermanfaat...