Css kodlarımızda bu zaman kadar hep yanyana alt alta sıraladık ama günümüz tasarımlarında bu sıralamalar bizlere yetmemeye başladı ve artık dinamik bir resim gölgesi yapıyorsak bile bu gölge div’ini z-index ile resimin üstüne yerleştiriyoruz ve resim ne kadar değişirse değişisin bizim belirlediğimiz gölgeli z-index div’i altında çıkıyor.

Açıkcası z-index z ekseninde yani üst üste,  alt alta divleri yerleştirmemizi sağlıyor ancak z-index’i kullanabilmemiz için öncelikle  position özelliği vermemiz lazım yoksa z-index değeri çalışmayacaktır. Hemen örneklere geçelim.

Şimdi bir cerceve div’i içinde kutuBir ve kutuIki diye kutucuklar oluşturup birini sola biri sağla yaslayalım.

Css kodları :

.cerceve{width: 400px; height: 200px; background: #e2e2e2; margin:100px auto;}
            .kutuBir{width: 180px; height: 180px; background: #b98f91; float: left; }
            .kutuIki{width: 150px; height: 150px; background: #889f7b; float: right;}

Html kodları:

<div class="cerceve">
     <div class="kutuBir"></div>
     <div class="kutuIki"></div>
</div>

Şimdi kutucuklarımızdan  z-index değerini vermeden önce z-index değerinim çalışması için position:absolute; ve kafamıza göre top ve left komutlarını vereceğiz.

Css kodları :

.cerceve{width: 400px; height: 200px; background: #e2e2e2; margin:100px auto; position: relative;}
            .kutuBir{width: 180px; height: 180px; background: #b98f91; position: absolute; left: 10px; top: 10px;}
            .kutuIki{width: 150px; height: 150px; background: #889f7b; position: absolute; left: 60px; top: 25px;}

Görmüş olduğumuz üzere position absolute değerini verdik ve divler üst üste çıktı ama bizim amacımız katmanları yönetmek o yüzden şimdi z-index değerini vereceğiz. (Eğer position komutlarını anlayamadıysanız bu konudan komutları inceleyebilirsiniz)

Şimdi ise son nokta yani z-index elementini kullanma safasına geldik tabi buraya kadar biraz sıkıcı oldu ama makalenin her seviyeye hitap etmesi için temelden anlatmak zorundayım.

z-index;

z-index değeri kullanımı direk sayısal rakamlar ile belirtilir yani z-index:2; gibi bizde hemen üste çıkartmak istediğimiz kutucuklara sayısal büyüklüklere göre z-index değeri verelim.

Css kodları :

.cerceve{width: 400px; height: 200px; background: #e2e2e2; margin:100px auto; position: relative;}
            .kutuBir{width: 180px; height: 180px; background: #b98f91; position: absolute; left: 10px; top: 10px; z-index: 2;}
            .kutuIki{width: 150px; height: 150px; background: #889f7b; position: absolute; left: 60px; top: 25px; z-index: 1;}

Burada görüldüğü üzere kutuIki class’ına z-indez:1; ve kutuBir class’ına da z-index:2; dedik yani kutuBir’i kutuIki’nin üzerine çıkart diye belirttik. z-index elementinin özellikleri bukadardır arkadaşlar aşağıda z-index komutunu kullandığım web sitelerinden resim koydum ki z-index’in bizler için ne kadar önemli olduğunu görün diye.

Bu makale Aycan BÜLBÜL tarafından aycan.net için yazılmıştır.
Kaynak göstermenden yayımlamak yasaktır.