Css z-index elementi nedir ? nasıl kullanılır ?

22-07-2010, 13:00:23

AycanB

Kimlik doğrulama veya yönetimden onay bekliyor.

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.