Positioning

Positioning (posisi) dalam CSS mengacu pada cara elemen HTML ditempatkan atau diposisikan dalam halaman web. Properti positioning memungkinkan pengembang web untuk mengontrol tata letak elemen dengan lebih fleksibel. Berikut adalah beberapa nilai yang umum digunakan untuk properti positioning:

1. Static: Ini adalah nilai default. Elemen ditempatkan sesuai alur dokumen normal. Properti top, right, bottom, dan left tidak berlaku untuk elemen dengan posisi statis.

   position: static;

2. Relative: Elemen tetap dalam alur dokumen normal, tetapi posisi relatif terhadap posisi normalnya. Ini berarti Anda dapat menggunakan properti top, right, bottom, dan left untuk menggeser elemen relatif terhadap posisi aslinya.

   position: relative;

3. Absolute: Elemen dikeluarkan dari alur dokumen normal dan ditempatkan relatif terhadap elemen induk yang memiliki posisi tidak statis. Elemen dengan posisi absolut tidak mempengaruhi posisi elemen lain di sekitarnya.

   position: absolute;

4. Fixed: Elemen dikeluarkan dari alur dokumen normal dan ditempatkan relatif terhadap viewport browser. Ini berarti elemen akan tetap berada pada posisinya, bahkan ketika pengguna menggulir halaman.

   position: fixed;

5. Sticky: Elemen bertindak seperti posisi relatif sampai posisi pemicu tercapai dalam scrolling. Kemudian, elemen menjadi tetap (fixed) terhadap viewport.

   position: sticky;

Dengan menggunakan properti positioning ini, Anda dapat mengontrol tata letak elemen dengan lebih presisi, membuat desain halaman web menjadi lebih fleksibel dan menarik.