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

4

Halo sobat kodingers šŸ˜€ ! Kali ini kodi akan membahas apa sih perbedaan antara 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

Berikut dibawah ini merupakan contoh penggunakan elemen position dalamĀ CSS

1

Properti relative bergantung pada posisi elemen yang ada diatas. Pada kode dibawah, posisi elemen terdorong ke bawah (karena kita memberikan top sebesar 20px)

element relative

Gambar diatas merupakan elemen yang belum diberikan posisi

 

element relative 20px

GambarĀ diatas merupakan
elemen yangĀ telah diberikan posisiĀ topĀ sebesarĀ 20px.

Bisa terlihat perbedaannya, 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 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

 

element absolute

Gambar diatas Ā merupakan contoh penggunaan properti absolute

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

element absolute 2

Gambar diatas merupakan contoh penggunaan properti absolute dengan value yang sudah ditentukan.

Perlu diperhatikan bahwa ukuran element child diatas mengikuti ukuran dokumen.

Agar element child posisinya mengikuti elemen parent, kita perlu menambahkan properti pada elemen parent itu sendiri

1

Dengan itu, maka element child akan mengikuti element parent.

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.

1

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


 

Apabila ada pertanyaan atau masih ada yang bingung silahkan komentar di kotak komentar dibawah ini yang sudah disediakan šŸ˜€

Artikel ini diadopsi dari artikel di CSS-Tricks dengan beberapa penyesuaian.

  • Alvira Mohamad

    Makasih gan. Slama ini cuma coba2 aja. Ga tau teorinya gmna

  • Dewi Purnamasari

    sangat membantu šŸ™‚

  • prima

    bagus sekali tutorialnya sangat membantu. prima plastik spesialist map raport sudah berpengalaman 30th. info lengkap di : http://primaplastik.com/map-raport/

    • Bayu Nugroho

      mantap