CSS Position

Fungsi utama CSS adalah mengatur tata letak dari setiap element html website.

Ada dua properti yang berperan penting dalam mengatur posisi letak layout, yaitu position dan float.

Keduanya sama-sama digunakan dan penting. Tapi, untuk artikel kali ini saya fokus ke position dulu.

Properti position adalah property css untuk mengatur posisi sebuah elemen (statik, relatif, sticky, dll).

Static

Static adalah posisi default dari position. Artinya, jika kamu tidak menuliskan property position maka otomatis posisi elemennya adalah static.

div.static {
position:static;
border:1px solid #F74B4B;
padding:20px;
}

Properti static tidak terpengaruh dengan property css top, bottom, left dan right.

Relative

Kalau relative, lebih fleksibel. Dia akan ada pengaruhnya jika diberi property top, bottom, left dan right.

Saya beri contoh dengan tambahan property left dan margin-left. Dan perhatikan perbedaannya.

Kode css:

div.relatif {
position:relative;
border:1px solid #F74B4B;
padding:20px;
left:200px
}
div.relatif_margin {
position: relative;
border:1px solid #0BC861;
padding:20px;
margin-left:200px
}

Kode HTMLnya:

<div class="relatif">Ini punya posisi relatif left 200px</div>
<br>
<div class="relatif_margin">Ini punya posisi relatif margin left 200px</div>

Hasilnya adalah:

Jadi, kalau ada kata margin-left maka panjangnya akan menyesuaikan dengan panjang maksimal yang disediakan. Kalau hanya left saja maka tidak peduli panjang maksimalnya.

Fixed

Seperti namanya, fixed properti menghasilkan posisi yang pasti. Mau discroll atau diapain posisinya sudah pasti disitu.

Sebagai contoh lihat hasilnya di artikel ini. Kalau bingung perhatikan gambar berikut:

Posisi diatas didapat dari kode:

div.fixed {
position: fixed;
border:1px solid #62BD8C;
padding:20px;
bottom: 0;
left: 0;
background:#DCF5E7;
}

Sticky

Kalau fixed posisinya sudah pasti dari awal dan tidak terpengaruh dengan elemen lain, kalau sticky akan ada efek ketika halaman discroll.

Coba kamu scroll bagian ini. Nanti akan terlihat efeknya

Kode cssnya:

div.sticky {
position: sticky;
position: -webkit-sticky; /* Safari */
border:1px solid #F74B4B;
padding:20px;
left:200px;
top: 0;
background:white
}

Absolute

Berbeda dengan fixed, kalau absolute discroll akan masih ikut scroll. Kalau fixed, tidak terpengaruh. Posisinya sudah pasti fix ada disitu.

Kode cssnya:

div.absolute {
position: absolute;
border:1px solid #F74B4B;
padding:20px;
left:200px
}

Overlap Z-Index

Z-index digunakan untuk mengatur tingkat layering suatu elemen. Misal jika ada elemen A dan B saling numpuk. Mana yang terlihat?

Untuk menentukan itu maka setiap elemen diberi properti z-index. Jika elemen A diberi z-index:1; sedangkan element B z-index:2; maka elemen B akan diatas elemen A.

Property CSS Position

Berikut ini adalah tabel daftar property untuk position css:

Property	Keterangan
z-index	Mengatur urutan layering element (dimulai dari 0)
position	Mengatur tipe posisi element
clip	Mengatur posisi absolut element
left	Mengatur margin kiri untuk kotak yang diposisikan
right	Mengatur margin kanan untuk kotak yang diposisikan
bottom	Mengatur margin bawah untuk kotak yang diposisikan
top	Mengatur margin atas untuk kotak yang diposisikan

Sekian artikel tentang cara mengatur position html dengan css. Semoga bermanfaat.