Css Z-index nedir? Nasıl kullanılır?

CSS’e gelen yeniliklerle birlikte her geçen daha kullanıcı dostu, daha kaliteli siteler kurmaya başlıyoruz. Yıllardan beri gelen alt alta, yanyana yapılan kutucukları da CSS in bir elementi sayesinde değişime uğratıyoruz.

2D düzlemde X ve Y vardır. Bunlardan biri yatay diğeri de dikey düzlemdir. Z ise işin 3D olan kısmını ekleyip, karşıdan baktığımızda Ön ve arkada olan kutucukların görünümünü bize veriyor.

CSS’teki gelişmeyle birlikte eskiden yaptığımız gibi div leri sağa sola yaslayıp, yan yana dizmek artık işimize çokta gelmiyor.

Bu yüzden Z-index ortaya çıktı ve bize divleri sanki Photoshoptaki Katmanlarmış gibi üst üste koymamızı sağladı.

Bunu daha iyi anlamak için aşağıdaki şemaya bakınız.

zindex

Z-index z ekseninde 3d düzlemde üst üste,  alt alta divleri yerleştirmemizi sağlıyor. Z-index’i kullanabilmemiz için öncelikle  position özelliği doğru olarak vermemiz gerekiyor aksi halde z-index değeri çalışmayacaktır.

Bunu bir örnekle açıklamak gerekirse iki tane div’imiz olsun. Bunlara div1 ve div2 diyelim.

iki-div

Şimdi bunların üst üste olmasını istiyoruz. İlk önce HTML kodumuzu yazalım.


<div class="content">
<div class="div1"></div>
<div class="div2"></div>
</div>

Şimdi CSS kodlarımıza gözatalım.

.content {width:500px;height:500px;background:#fff;margin:100px auto;position:relative;}
.div1 {width:150px;height:150px;background:#c1c0bd;position:absolute;left:10px;top:10px;}
.div2 {width:125px;height:105px;background:#ffcdba;position:absolute;left:50px;top:20px;}

Bu CSS kodlarımızı da ekledikten sonra ortaya çıkan sonuç üst üste geçmiş 2 Div olmalı. Burada önemli olan Position değerinin absolute olarak verilmesi. Onun dışında left ve top değerlerine istediğimiz rakamı vererek div lerin content div i üstünde ona göre yerleşmesini sağlayabiliriz.

div-ust-uste-1

Div’leri üst üste getirdik ama biz Z-index kullanmadık. Biz Div2’nin Div1’in altında olmasını ve sadece sağ ucunun görünmesini istiyoruz. Şimdi CSS kodumuza z-index değerlerimizi ekleyelim.

.content {width:500px;height:500px;background:#fff;margin:100px auto;position:relative;}
.div1 {width:150px;height:150px;background:#c1c0bd;position:absolute;left:10px;top:10px;z-index:2;}
.div2 {width:125px;height:105px;background:#ffcdba;position:absolute;left:50px;top:20px;z-index:1;}

Kodu bu şekilde değiştirdiğimizde sonuç aşağıdaki gibi olacaktır.

div1-ustte-1

Gördüğümüz üzere Z-index değeri verildiği takdirde Div’ler tamamen yer değiştirdiler. Sanırım Z-index ve position elementlerinin nasıl kullanıldığı hakkında aklımızda bir fikir oluştu. Bir sonraki konuya kadar Sağlıcakla Kalın.

etıketler css z-index

DAHA FAZLA İÇERİK

Beyinle yönetilen Biyonik Protez Kol Beyinle yönetilen Biyonik Protez Kol

25 Aralık 2014, Perşembe

Facebook Hesabını Nasıl Dondururuz? Facebook Hesabını Nasıl Dondururuz?

12 Şubat 2015, Perşembe

SİZDE YORUM YAPIN