Properti z-index berfungsi untuk mengatur susunan layer pada browser.
Sebetulnya sebuah tag HTML seperti tag div misalnya adalah sebuah layer yang disusun secara berurutan, tapi dengan Properti z-index anda bisa mengatur susunannya sesuai keinginan anda.
Properti z-index dapat bernilai bilangan integer mulai dari nol ke atas, semakin besar nilai bilangannya maka susunannya menjadi semakin diatas.
Baiklah untuk lebih memperjelas fungsi z-index, saya akan memberikan ilustrasi seperti ini, Dalam sebuah halaman web terdapat 3 div yaitu:
<div class=”layer_1″>BERWARNA BIRU</div>
<div class=”layer_2″>BERWARNA HIJAU</div>
<div class=”layer_3″>BERWARNA KUNING</div>
Selanjutnya masing-masing class selector diberi style sepertti berikut:
div.layer_1 {
background-color:blue;
position:relative;
left:0;
top:0;
z-index:0;
}
div.layer_2 {
background-color:green;
position:relative;
left:20px;
top:-20px;
z-index:1;
}
div.layer_3 {
background-color:yellow;
position:relative;
left:40px;
top:-40px;
z-index:2;
}div.layer_1, div.layer_2, div.layer_3 {
width:200px;
padding:20px 15px;
text-align:center;
font-size:14px;
font-weight:bold;
color:#000000;}
hasilnya akan tampak seperti dibawah ini:
Bila anda ingin merubah susunan layer tersebut, anda tinggal meng edit bilangan integer yang menjadi nilai z-index. dan kalau belum jelas tentang penggunaan z-index, silahkan isi comment form dibawah…! mudah mudahan Saya bisa bantu anda.
thx bnget nih infonya
Sangat bermanfaat!
mantab banget, langsung ke tekape… hehehe thanks mas
wah, makasih banget yach mas. dari dulu saya masih belum ngerti soal z-index ini. tapi sekarang udah mulai paham dech…..
Makasih atas infonya.