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

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 adalah Merupakan salah satu elemen yang mengikuti halaman .jadi maksudnya itu elemen akan menepati posisi mengikuti alur halaman misal kita tulis value top,bottom,left,right, itu takkan terpengaruh .
•  Relative adalah Merupakan salah Satu elemen yang Sama Dengan Static . Tetapi Disini Yang membedakana Kalau kita Tambakan Value top,bottom,left,right, itu akan Berpengaruh .
• Sebagai contonya gambar dibahwa ini :

Gambar diatas merupakan elemen yang belum diberikan posisi

 Gambar dibahwa merupakan
elemen yang telah diberikan

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 diberika 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 { position: absolute; }

1 2 3

.element {     position: 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 { position: absolute; left: 0; right: 0; bottom: 0; }

1 2 3 4 5 6

.element {     position: absolute;     left: 0;     right: 0;     bottom: 0; }

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

.parent { position: relative; }

1 2 3

.parent {     position: relative; }

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.

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