Properti position di CSS adalah salah satu yang paling sering membingungkan bagi pemula. Memahami perbedaan antara relative, absolute, fixed, dan sticky sangat penting karena masing-masing berperilaku sangat berbeda. Artikel ini menjelaskan setiap nilai dengan contoh nyata agar mudah dipahami.
Nilai-nilai Properti Position
CSS memiliki lima nilai untuk properti position:
-
static— nilai default, mengikuti alur normal dokumen -
relative— digeser relatif terhadap posisi normalnya -
absolute— diposisikan relatif terhadap ancestor yang ber-position -
fixed— diposisikan relatif terhadap viewport (jendela browser) -
sticky— kombinasi relative dan fixed
Properti top, right, bottom, dan left digunakan bersama position (kecuali static) untuk mengatur offset posisi elemen.
position: static (Default)
Ini adalah nilai default setiap elemen. Elemen mengikuti alur normal dokumen HTML dan tidak terpengaruh oleh top, right, bottom, atau left.
.elemen {
position: static; /* default, tidak perlu ditulis */
}
Artikel ini ditampilkan sebagian. Untuk pembahasan selengkapnya, beserta contoh dan langkah detailnya, Anda dapat membacanya pada sumber aslinya:
Perbedaan Position Relative, Absolute, dan Fixed di CSS
Tutorial pemrograman dan tools developer lainnya juga tersedia di dhiecoderweb.com.
Top comments (0)