Memahami CSS Position Property
Setelah saya baca-baca tutorial dan penjelasan mengenai property position dari w3schools dan belajarkoding, saya akhirnya bisa sedikit memahami perbedaan fungsi diantara lima value tersebut. Sebenarnya saya sudah pernah baca-baca dan nge-praktikin kelima value itu, tapi ya karena jarang-jarang belajar lagi, akhirnya penyakit lupa menyerang. LOL.
Oke, langsung saja saya ceritakan hasil belajar saya kali ini.
Pada dasarnya, property position pada CSS memiliki empat value, yaitu:
Tentunya kelima value tersebut memiliki fungsi masing-masing.
1. static
Value static ini merupakan value default yang secara otomatis nempel di elemen html. Jadi tanpa dideklarasikan pun value ini sudah ngikut secara otomatis.
Singkatnya, value static ini akan memposisikan elemen html langsung di bawah atau di samping (jika pake float) elemen sebelumnya. Dia bisa digeser kesana kemari dengan memainkan margin atau padding atau property box-model lainnya.
2. relative
Value relative ini sebenarnya mirip sama static, hanya saja dia bisa digeser-geser menggunakan property top, right, bottom, dan left. Keempat property tsb bisa digunakan untuk menggeser elemen kesana kemari sesuai kebutuhan.
Kalau menggunakan value ini, posisi elemen akan tetap berada di setelah elemen sebelumnya (tidak nabarak atau numpuk). Dan batas luarnya akan mengikuti elemen parent-nya (tidak mengikuti full page atau body page nya).
3. absolute
Value absolute ini juga bisa dipengaruhi property top, right, bottom, dan left. Dengan menggunakan value ini, elemen akan keluar dari format posisi lainnya. Atau bisa dibilang, dia lepas dari parent-nya. Jadi batas luarnya akan mengikuti body page. Dia juga bisa numpuk atau nabrak elemen lain. Jadi tinggal main z-index saja supaya bisa mengatur yang mana yang lebih atas.
4. fixed
Value fixed ini mirip sama value absolute. Bedanya ada pada letaknya saja. Kalau pakai value fixed, maka elemen akan selalu berada di situ walaupun page nya discroll atas bawah kanan kiri.
5. inherit
Saya belum pernah sih pakai value inherit ini. Hanya saja yang saya pahami, dia akan mengikuti position dari parent-nya. Jadi kalau parent-nya pakai absolute, maka dia bakalan ngikut jadi absolute. Kurang lebih seperti itu.
*yang di maksud parent itu, elemen yang punya elemen lagi di dalamnya. Lha, elemen yang ada di dalam parent itu namanya child. Contohnya seperti ini:
<div> //ini div parent
<div> // ini div child (anaknya parent)
</div>
</div>
Oke, itu sedikit yang saya pahami. Mohon maaf kalau belum ada contoh coding dan contoh hasilnya. Ini saya nulis itung-itung supaya ingat, dan kalau lupa, tinggal buka blog saya. Hehe..
Semoga bermanfaat ^ ^
Oke, langsung saja saya ceritakan hasil belajar saya kali ini.
Pada dasarnya, property position pada CSS memiliki empat value, yaitu:
- static
- relative
- absolute
- fixed
- inherit
Tentunya kelima value tersebut memiliki fungsi masing-masing.
1. static
Value static ini merupakan value default yang secara otomatis nempel di elemen html. Jadi tanpa dideklarasikan pun value ini sudah ngikut secara otomatis.
Singkatnya, value static ini akan memposisikan elemen html langsung di bawah atau di samping (jika pake float) elemen sebelumnya. Dia bisa digeser kesana kemari dengan memainkan margin atau padding atau property box-model lainnya.
2. relative
Value relative ini sebenarnya mirip sama static, hanya saja dia bisa digeser-geser menggunakan property top, right, bottom, dan left. Keempat property tsb bisa digunakan untuk menggeser elemen kesana kemari sesuai kebutuhan.
Kalau menggunakan value ini, posisi elemen akan tetap berada di setelah elemen sebelumnya (tidak nabarak atau numpuk). Dan batas luarnya akan mengikuti elemen parent-nya (tidak mengikuti full page atau body page nya).
3. absolute
Value absolute ini juga bisa dipengaruhi property top, right, bottom, dan left. Dengan menggunakan value ini, elemen akan keluar dari format posisi lainnya. Atau bisa dibilang, dia lepas dari parent-nya. Jadi batas luarnya akan mengikuti body page. Dia juga bisa numpuk atau nabrak elemen lain. Jadi tinggal main z-index saja supaya bisa mengatur yang mana yang lebih atas.
4. fixed
Value fixed ini mirip sama value absolute. Bedanya ada pada letaknya saja. Kalau pakai value fixed, maka elemen akan selalu berada di situ walaupun page nya discroll atas bawah kanan kiri.
5. inherit
Saya belum pernah sih pakai value inherit ini. Hanya saja yang saya pahami, dia akan mengikuti position dari parent-nya. Jadi kalau parent-nya pakai absolute, maka dia bakalan ngikut jadi absolute. Kurang lebih seperti itu.
*yang di maksud parent itu, elemen yang punya elemen lagi di dalamnya. Lha, elemen yang ada di dalam parent itu namanya child. Contohnya seperti ini:
<div> //ini div parent
<div> // ini div child (anaknya parent)
</div>
</div>
Oke, itu sedikit yang saya pahami. Mohon maaf kalau belum ada contoh coding dan contoh hasilnya. Ini saya nulis itung-itung supaya ingat, dan kalau lupa, tinggal buka blog saya. Hehe..
Semoga bermanfaat ^ ^
Komentar
Posting Komentar