CSS Position Static Relative Absolute Fixed dan Inherit Berbeda

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

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

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.

Itulah Perbedaan CSS Position Static Relative Absolute Fixed dan Inherit

Leave a Reply

Your email address will not be published. Required fields are marked *