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 PropertyDeklarasi adalah bagian yang ada di dalam
{} yaitu properti dan nilai.Value atau Nilai dari CSS
position adalah :1.
static ditulis position:static2.
relative ditulis position:relative3.
absolute ditulis position:absolute4.
fixed ditulis position:fixed5.
inherit ditulis position:inheritposition: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:leftUntuk 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 inginkanposition: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).Semoga bermanfaat...