POSITION STATIC

Artikel ini akan membahas tentang position: static; yang merupakan nilai default dari properti CSS position. Properti ini digunakan untuk mengatur posisi elemen pada halaman web.

Position Static

Secara default, semua elemen HTML memiliki nilai position: static;. Artinya, elemen akan ditempatkan dalam urutan alami dalam halaman web, sebagaimana mereka muncul dalam kode HTML. Dalam kasus ini, top, right, bottom, dan left tidak berfungsi.

Mari kita lihat contoh sederhana:

div {
   position: static;
}

Pada contoh di atas, elemen div memiliki posisi static, yang berarti elemen tersebut akan muncul secara normal dalam alur dokumen. Properti lain seperti top, bottom, right, dan left tidak akan memberikan efek apa pun pada elemen ini.

Perbedaan dengan position lainnya

Berbeda dengan position: static;, ada beberapa nilai lain dari properti position yang akan mempengaruhi posisi elemen, yaitu: relative, fixed, absolute, dan sticky.

Position Relative

Position: relative; akan membuat elemen berlaku relatif terhadap posisi normalnya.

Position Fixed

Position: fixed; akan membuat elemen ditempatkan relatif terhadap jendela browser, dan tidak akan bergerak meskipun halaman di-scroll.

Position Absolute

Position: absolute; akan membuat elemen berada dalam posisi absolut terhadap elemen terdekat yang bukan position: static.

Position Sticky

Position: sticky; adalah kombinasi antara position: relative; dan position: fixed;, dan akan berubah berdasarkan posisi scroll pengguna.

Penting untuk mengerti bahwa elemen dengan position: static; tidak akan terpengaruh oleh properti top, right, bottom, dan left. Namun, jika kamu mengubah nilai position menjadi selain static, properti-posisi tersebut dapat digunakan untuk mengubah lokasi elemen tersebut.