z index pada css
z-index adalah properti CSS yang digunakan untuk mengontrol tumpukan (stacking) elemen dalam tata letak (layout) dengan posisi terpisah (positioned). Properti z-index menentukan urutan tumpukan atau lapisan mana elemen akan ditampilkan di atas atau di bawah elemen-elemen lainnya.
Beberapa hal yang perlu diketahui tentang z-index dalam CSS:
Nilai z-index harus digunakan pada elemen yang memiliki properti-posisi CSS seperti position: relative, position: absolute, atau position: fixed. Properti z-index tidak berlaku untuk elemen dengan posisi statis (position: static).
Semakin tinggi nilai z-index, semakin tinggi elemen akan berada dalam tumpukan, sehingga akan ditampilkan di atas elemen-elemen dengan z-index yang lebih rendah.
Elemen dengan z-index yang sama akan ditampilkan berdasarkan urutan dalam markup HTML, di mana elemen yang ditulis terakhir akan ditampilkan di atas elemen sebelumnya.
z-index hanya berlaku di antara elemen-elemen yang memiliki hubungan orang tua-anak. Artinya, z-index hanya mempengaruhi elemen-elemen dalam hierarki yang sama.
Contoh penggunaan z-index dalam CSS:
css
Copy code
.element1 {
position: relative;
z-index: 2;
}
.element2 {
position: relative;
z-index: 1;
}
Pada contoh di atas, .element1 memiliki z-index yang lebih tinggi dibandingkan dengan .element2. Oleh karena itu, .element1 akan ditampilkan di atas .element2 dalam tata letak. Jika kedua elemen memiliki posisi yang sama dan z-index yang sama, maka urutan mereka dalam markup HTML akan menentukan tumpukan mereka.
Anda juga dapat menggunakan nilai negatif pada z-index untuk menentukan elemen-elemen yang akan ditampilkan di bawah elemen-elemen dengan z-index positif.
Perhatikan bahwa z-index hanya berlaku dalam konteks elemen yang memiliki posisi terpisah (positioned). Pada elemen dengan posisi statis (position: static), z-index tidak memiliki efek apa pun.
