CSS : Perbedaan Position Static, Relative, Absolute, Fixed dan Inherit

css3

Apa kabar sobat :v ! Kali ini MasRizky akan membahas apa sih perbedaan CSS Position Static, Relative, Absolute, Fixed, dan Inherit.

Perlu diketahui sebelumnya, bahwa properti position memanipulasi lokasi elemen. Ada beberapa jenis position yang bisa kita tentukan, antara lain :

1. Static
2. Relative
3. Absolute
4. Fixed
5. Inherit

Static

Properti static merupakan properti bawaan semua elemen, dimana semua elemen akan memiliki properti ini. Dengan properti ini, elemen akan menempati posisi mengikuti alur halaman.

Jadi, apabila kita menambahkan value top, bottom, left, right, value tersebut tidak akan menghasilkan apapun.

Relative

Posisi elemen tetap mengikuti alur dokumen, hampir sama dengan value static. Yang menjadi perbedaan yaitu, value top, bottom, left, right akan berfungsi. Pengaturan posisi pada suatu elemen menggunakan value tersebut akan “mendorong” elemen tersebut ke arah yang diinginkan.

jadi properti relative ini bergantung pada posisi elemen yang ada diatas / elemen sebelumnya.

Absolute

Elemen akan dihilangkan / dicabut dari alur dokumen, dan elemen lainnya akan bekerja sebagaimana mestinya (tidak terganggu dengan elemen yang diberikan properti absolute).

Apabila element yherang mempunyai properti absolute tersebut ada didalam sebuah element lagi (parent), maka element tersebut akan diabaikan, seakan-akan elemen tersebut tidak ada di dalam element parent tersebut.

Apabila kita mengatur value seperti top, bottom, left, right, maka element child tersebut akan merespon dengan dimensi dokumen, bukan pada element parent-nya. Hampir sama dengan elemen yang diberi properti fixed.

Fixed

Elemen akan dicabut / dilepas dari alur dokumen, hampir sama dengan elemen yang diberi properti absolute. Yang menjadi perbedaan, elemen yang diberikan posisi fixed akan selalu mengikuti (relative) dokumen, bukan element parent tertentu, atau dengan scroll halaman web.

Inherit

Properti ini digunakan untuk menurunkan value yang ada di element parentnya. Misalnya apabila element parentnya bernilai absolute, maka element childnya akan bernilai absolute pula
.

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: