Baik teman-teman WebHozz dalam mendesign sebuah website untuk menentukan posisi objek terhadap objek lain, atau objek terhadap browser, diperlukan pemahaman CSS Position.
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
Untuk itulah pada tutorial kali ini saya akan menjelaskan mengenai cara kerja properti dari CSS Position ini diantaranya dengan value/ nilai Relative Position dan Absolute Position.
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. Lihat DEMO.
position:absolute
Dengan menerapkan position:absolute, maka objek akan mengikuti parent (induk elemen) dengan catatan induk elemen harus menggunakan position:relative.
Klik DEMO.
Posisi BOX-1 tidak akan keluar karena parent (WRAPPER) menggunakan position:relative. Intinya position:relative merupakan pagar dari anak yang diberi position:absolute supaya tidak keluar dari batas.
Klik DEMO
Baik teman-teman selamat mencoba 🙂
