myNotlar Logo

zIndex


Internet Explorer Firefox Opera

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
katmanArtı 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
Kırmızı z-index:
Yeşil z-index:
Mavi z-index:
İlgili Başlıklar
 
myNotlar Hakkında
Telif Hakkı © 2007-2009 mynotlar.com Tüm Hakları Saklıdır. Kopyalanamaz. Yayınlanamaz.
E-Posta : support@myNotlar.com

| Tek Kişilik Oyunlar | Sudoku | Oyunlar |