Z-INDEX

Z-index adalah properti CSS yang digunakan untuk menentukan sejauh mana elemen menumpuk satu sama lain di bidang z atau sumbu kedalaman (sumbu Z pada XYZ koordinat).

Nilai z-index dapat disetel sebagai bilangan bulat positif atau negatif dan elemen dengan z-index yang lebih tinggi akan tampil di atas elemen lain dengan z-index yang lebih rendah.

Jadi, dalam web design, jika kamu memiliki dua elemen yang tumpang tindih, kamu bisa menggunakan z-index untuk mengontrol elemen mana yang muncul di depan dan mana yang muncul di belakang.

Cara Kerja Z-index

Z-index hanya bekerja pada elemen yang memiliki posisi relatif, absolut, atau fixed. Bila diaplikasikan pada elemen dengan posisi statis, properti ini tidak memiliki efek.

Untuk memberikan konteks, bayangkan halaman web sebagai ruangan 3 dimensi. Elemen-elemen pada halaman webmu akan berlapis-lapis seperti kotak-kotak di ruangan tersebut, memiliki kedalaman sepanjang sumbu z.

Penggunaan Z-index

Berikut adalah sintaks dasar untuk mengatur z-index:

element {
  position: relative; /*or absolute, or fixed*/
  z-index: 1; /*or any integer*/
}

Sangat penting untuk mengingat bahwa z-index tidak dapat digunakan sendirian. Harus selalu dipasangkan dengan properti posisi seperti position: relative;, position: absolute;, atau position: fixed;.

Contoh

Mari kita coba menggunakan z-index dalam contoh berikut:

<div style="position: relative; z-index: 1; background: red;">Div 1</div>
<div style="position: relative; z-index: 2; background: green;">Div 2</div>

Pada contoh di atas, kita memiliki dua div yang ditumpuk. Kedua div tersebut memiliki properti posisi relatif dan nilainya berbeda untuk z-index. Lebih spesifik lagi, div pertama memiliki z-index 1 dan div kedua memiliki z-index 2. Karena div kedua memiliki z-index yang lebih tinggi, ia akan ditampilkan di atas div pertama.