Css Z-index Nedir ? Nasıl Kullanılır ? #Öğreniyorum

ANAHTAR KELiMELERiMiZ: Öğreniyorum, css, Web Design, nedir?, Z-index, z-index kullanımı, z-index nasıl kullanılır, z-index nedir

Z-index, konumlandırma elementleri uygulanmış katmanların z-eksenindeki konumu belirlemek için kullanılır.
Z-index tüm elementlere uygulanamaz sadece konumlandırma değeri atanmış elementlere uygulanır. Bunun anlamı eğer bir elementi aynı z-ekseni üzerinde üste veya alt sıraya atmak istiyorsanız ilk olarak konumlandırma değeri atamalısınız.

Z-index değeri dokümanımızdaki elementlerin istiflenme sıralarını belirler. Z-index elementleri z-ekseninde nerede duracağınız belirler, üstte veya altta. Z-indeks değeri küçük olan elementler altta büyük olan elementler ise üstte görünecektir.

Sitenizi kodlarken birçok yerde Z-index ihtiyaç duymayız çünkü normal sayfa akışında elementler yanyana durduğu için böyle bir özelliğe ihtiyaç yoktur, ne zamanki elementlere konumlandırma değeri tanımladığımızda elementler bir biri üzerine bindiğinde Z-index değerine ihtiyaç duyarız.
Z-index mutlak, göreceli ve sabit konumlandırma atandığı veya elemente eksi değer verilerek konumu değiştirildiğinde uygulanır.

Yapısı:z-index:  
Aldığı Değerler: | auto | inherit
Başlangıç değeri:auto 
Uygulanabilen elementler:postion uygulanan elementlere 
Kalıtsallık:Yok

Tarayıcı Uyumu:
Firefox 
Chrome 
Safari
Opera 
İnternet Explorer 
Mobil Tarayıcılar
iOS Safari
Opera Mobile 
Android Browser

Konumlandırma değeri relative, absolute ve fixed uygulanmış katmanların görünürlüğünü z-index ile ayarlayabiliriz.

div{ 
    position:absolute; 
    width:150px;
    height:150px; 
}

div.bir { 
    background: #FEB3BE; 
    border:2px solid #CC8B94; 
    top: 0; 
    left: 0; 
}

div.iki { 
    background: #E5ECF9; 
    border:2px solid #BCCCEB; 
    top: 10px; 
    left: 10px; 
}

Yukarıda örnekte görüldüğü gibi katmanlar üst üste sıralanmıştır. Birbirinden 10px üst ve 10px soldan mesafe bırakılmıştır. Üstte kalan katman alttakileri gizlemiştir. Tüm katmanların z-index değeri atanmamıştır bu nedenle başlangıç değeri olan z-index:auto değerini almışlardır.


Z-index değeri otomatik olduğu için her katman html’deki sırasına göre yerleşmiştir. İlk başta yazılmış olanlar altta sonrakiler üstte olacak şekilde sıralanmıştır.Eğer katmanları istediğimiz sıra ile göstermek istiyor isek her katmana sırasına göre sayısal değer atamalıyız. Yüksek değer alan katmanlar üstte düşük değer alan katmanlar ise altta kalacaktır. Buna göre istediğimiz görüntüyü elde etmek için z-index değerleri vermeliyiz.

Yukarıda yaptığımız örnekte alttaki kırmızı katmanı üste çıkarmak için z-index değerini 2 versek. Mavi katmanın z-index değerini 1 verirsek katman görünümünü tersine dönecektir.

div{ 
    position:absolute;
    width:150px; 
    height:150px; 
}

div.bir { 
    background: #FEB3BE; 
    border:2px solid #CC8B94; 
    top: 0; 
    left: 0; 
    z-index:2 
}

div.iki { 
    background: #E5ECF9; 
    border:2px solid #BCCCEB; 
    top: 10px; 
    left: 10px; 
    z-index:1 
}