Properti position CSS digunakan untuk mengatur posisi dari sebuah elemen HTML pada saat ditampilkan, apakah saling menumpuk atau saling bersebelahan dengan elemen lainnya.

Properti position memiliki beberapa nilai yang bisa digunakan untuk mengatur posisi elemen, yaitu: static, relative, absolute, dan fixed, dimana  beberapa nilai-nilai tersebut dapat diatur dengan menggunakan properti top, left, right, bottom dengan menggunakan nilai positif atau negatif.

1. Position Static

Secara default, seluruh properti position dari HTML element memiliki nilai static. Element dengan properti tersebut tidak akan terpengaruh oleh properti top, bottom, left, dan right. Element tersebut akan selalu berada sesuai dengan alur normal penempatan element dalam halaman web.

Contoh penggunaan properti position static:


Pada contoh kode diatas, kita menambahkan properti top dengan nilai 100px pada elemen <div>, maka seharusnya elemen tersebut akan turun hingga 100px, tapi tidak ada perubahan yang terjadi, itu karena kita menggunakan nilai static pada properti position.

2. Position Relative

Properti position dengan nilai relative hampir sama dengan posisi static, yaitu posisi normal. Perbedaannya, dengan nilai relative kita dapat menentukan jarak element baik kiri, kanan, atas, maupun bawah menggunakan properti left, right, top, dan bottom.

Contoh penggunaan properti position relative:


Pada contoh kode diatas, kita menambahkan properti top dengan nilai 100px pada elemen <div>, maka elemen tersebut akan turun hingga 100px setelah elemen <h2>, itu karena kita menggunakan nilai relative pada properti position.

3. Position absolute

Position ini mirip dengan position relative, namun position absolute akan mengatur relative terhadap yang membungkusnya (yang nilai properti positionnya bukan static), bukan relative terhadap viewport atau tampilan browser penuh.

Contoh penggunaan properti position absolute:


Pada contoh kode diatas, kita memberi properti position: absolute pada elemen <div> dengan class:"kuning-absolute". Element tersebut akan diposisikan relatif terhadap element <div> dengan class:"biru-relative" yang merupakan parentnya (yang membungkusnya terdekeat dan nilai properti positionnya bukan static). 

Dengan kata lain, kotak kuning yang memiliki properti right: 15px relatif terhadap kotak biru. Jadi posisi kotak kuning memiliki jarak 15px yang relatif di bagian kanan terhadap kotak biru.

4. Position fixed

Element yang memiliki properti position dengan nilai fixed akan mempunyai posisi yang tetap walaupun halaman website di-scroll ke bawah. Kita bisa memberikan properti top, bottom, right, dan left pada element yang memiliki style position: fixed.

Properti ini biasanya digunakan pada element yang posisinya selalu konstan seperti navigation bar dari sebuah halaman web yang selalu berada di bagian atas halaman. Atau chatbox yang selalu ada di pojok layar agar mudah diakses seperti animasi di bawah ini.



Contoh penggunaan properti position fixed:


Pada contoh kode diatas, kita menambahkan properti position dengan nilai fixed pada elemen <div>, maka jika halaman websitenya kita scroll, element tersebut tetap berada ditempat yang sama. Itu adalah effect dari penggunaan properti position dengan nilai fixed.

5. Position sticky

Position sticky memiliki konsep yang hampir mirip dengan position fixed, perbedaannya pada halaman di scroll. Elemen yang memiliki properti position dengan nilai sticky akan berada pada bagian atas halaman web ketika halaman web di-scroll. Jadi elemen tersebut akan diam di lokasi relatif terhadap viewport.

Viewport adalah area di layar, dimana halaman web ditampilkan. Ukuran viewport di laptop tentu berbeda dengan ukuran viewport di smartphone.

Contoh penggunaan properti position sticky:


Pada contoh kode diatas, kita menambahkan properti position dengan nilai sticky pada elemen <p> yang berisi teks "I am sticky!". Element tersebut awalnya berperilaku seperti memiliki properti position: relative, namun saat halaman web di-scroll, element tersebut posisinya naik dan saat jaraknya dengan batas atas viewport adalah 30px (yang kita setting di kode: top:30px), posisinya tetap seperti memiliki properti position: fixed.

Sumber:
https://skilvul.com/courses/css-dasar/
https://pesonainformatika.com/belajar-css/
https://bahasaweb.com/mengatur-position-di-css/
https://www.warungbelajar.com/mengenal-css-position.html