zIndex özelliği, üst-üste yerleştirilebilen (istiflenebilen) elementlerde, elementin katman sırasının belirlenmesini sağlar.
DOM Sözdizimi
element.style.zIndex = "katman"
CSS Sözdizimi
z-index: katman
| katman | Artı veya eksi tamsayı değer alarak elementin bulunduğu katmanı belirler.
|
- Pozitif z-index değerine sahip elementler, negatif değerli veya kendilerinden küçük z-index değerlerine sahip elementlerin üstünde gösterilir.
- Aynı z-index değerine sahip üst üste gelmiş elementler, doküman hiyerarşisine göre sonraki gelen üste gelecek şekilde birbirlerinin üzerine yerleştirilirler.
- z-index özelliği sadece elementin CSS position özelliği relative veya absolute değerlerine sahipken kullanılabilir.
- select elementi gibi "açılabilir" elementlerde z-index özelliği uygulanamaz.
Aşağıdaki örnek, üst-üste yerleştirilmiş 3 div elementinin zIndex değerlerinin elle ayarlanmasını göstermektedir.
<style type="text/css">
.ornekHucre
{
width:120px;
}
#div1, #div2, #div3 {
position:relative;
width:60px;
height:45px;
opacity: 0.9;
filter: alpha(opacity=90);
}
#div1 {
left:0px;
top:0px;
background-color:red;
z-index:3;
}
#div2 {
left:31px;
top:-22px;
background-color:green;
z-index:2;
}
#div3 {
left:61px;
top:-46px;
background-color:blue;
z-index:1;
}
</style>
<script type="text/javascript">
var getElem = function(a)
{
return document.getElementById(a);
}
function ayarla()
{
getElem("div1").style.zIndex = parseInt(getElem("girisDiv1").value);
getElem("div2").style.zIndex = parseInt(getElem("girisDiv2").value);
getElem("div3").style.zIndex = parseInt(getElem("girisDiv3").value);
}
</script>
<table><tr><td class="ornekHucre">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</td>
<td align="right" valign="top">
Kırmızı z-index: <input id="girisDiv1" value="3" /><br/>
Yeşil z-index: <input id="girisDiv2" value="2" /><br/>
Mavi z-index: <input id="girisDiv3" value="1" /><br/>
<input type="button" value="Uygula" onClick="ayarla()" />
</td></tr></table>
Test Edin