Memahami CSS Position Property dan Valuenya

Kang Ismet
CSS
Minggu, 17 November 2013
141 Komentar

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). 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
Untuk ujicoba silahkan klik 'Edit in JSFiddle'. Anda tidak harus mendaftar di JSFiddle, cukup
edit kode dan klik RUN untuk melihat hasilnya.

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...