CSS | Kenalan dengan Property Position static, relative, absolute, fixed, sticky, initial, dan inherit

Dalam CSS terdapat properti position berguna untuk mengatur tata letak dan posisi masing-masing elemen sesuai dengan yang kita inginkan.

Properti position ini memiliki beberapa value diantaranya :

static, relative, absolute, fixed, sticky, initial, inherit

perlu kalian ketahui bahwasanya default dari value property position adalah static

1. Static

Posisi dan letak elemen akan mengalur seperti apa adanya alur halaman html.

Static tidak berpengaruh dengan nilai box-offset yaitu, top, right, bottom dan left. Value ini tidak akan berpengaruh pada elemen yang memiliki position static.

elemen dengan class box pada contoh diatas tidak mencantumkan nilai position dengan kata lain nilai position pada elemen tersebut akan otomatis bernilai static. Hal ini karena secara default position bernilai static atau akan sesuai dengan penulisan kode pada html yaitu mengalur ke bawah. Selain itu, nilai left: 40px; pada class box tidak berpengaruh pada tampilan.

2. Relative

Position relative tidak jauh berbeda dengan static. Perbedaannya terletak pada berpengaruhnya nilai box-offset pada elemen yang bersifat relative. Pengaturan posisi atau tata letak elemen yang memiliki position: relative dapat menggunakan nilai-nilai seperti, top, right, bottom ataupun left.

element dengan class box — rel bernilai relative secara alur masih sama dengan static akan tetapi nilai box-offset dapat diterapkan pada position kali ini. Sehingga, nilai left: 40px; pada class box — rel berpengaruh pada tampilan sehingga elemen bergeser kekanan sejauh 40px.

3. Absolute

Berbeda dengan dua value sebelumnya, position:absolute tidak lagi bersifat static dengan kata lain tampilan yang dihasilkan tidak lagi sesuai dengan alur halaman yang dibuat. Elemen yang bernilai Absolute akan bersifat relative pada position parentnya. Jadi jika ada sebuah elemen yang memiliki position:absolute letak atau posisi elemen tersebut akan bargantung atau mengikuti elemen parentnya. Secara default, apabila tidak ada elemen parent yang memiliki position:relative maka elemen yang memiliki position:absolute letak dan posisinya akan bergantung pada elemen dokumen atau tag html.

Nilai box-offset seperti, top, right, bottom, left dapat diterapkan pada position absolute. Nilai ini akan dihitung dari elemen yang memiliki position:relative terdekat (sebagai parent).

elemen dengan class box — abs bernilai absolute dengan parent class wrapper yang bernilai relative.

4. Fixed

Position fixed memiliki kesamaan dengan absolute. Perbedaan terletak pada element parent relative dari element yang menerapkan position fixed. Jika pada absolute kita dapat mengatur siapa elemen parentnya untuk position fixed kali ini bergantung pada elemen parent yaitu halaman itu sendiri. Atau bersifat menempel/sticky pada tampilan halaman browser.

elemen dengan class box — fixed bernilai fixed sehingga menempel/sticky pada tampilan halaman browser.

5. Sticky

Sticky merupakan position yang memadukan antara nilai position relative dan fixed, yang bergantung pada scroll position. Elemen akan bernilai relative hingga melewati tampilan halaman browser akan menempel/sticky.

elemen position: sticky; bergantung pada user scroll.

6. Initial

Sama seperti nilai value lainnya, initial pada position merupakan menjadikan nilai pada elemen tersebut sesuai dengan nilai default position a.k.a elemen tersebut positionnya bernilai static.

7. Inherit

Jika sebuah elemen memiliki nilai position : inherit; berarti nilai position pada elemen tersebut bergantung pada position parentnya.