CSS’in Z-Index Değerini Tanıyalım

HTML ile oluşturduğumuz her türlü elemanı aranje ederken z-index komutunu kullanmaktayız. Ayrıca unutmamız gereken bir diğer önemli özelliği ise sadece CSS satırında position olan objeler için çalıştığıdır.

Kısaca z-index sayesinde bir objeyi bir diğer objenin altına veya üstüne taşıyabiliyoruz. Objelerden kastım aklınıza gelecek her şey; divler, tablolar, resimler, formlar vs.

Örneklerle bilgilerimizi pekiştirelim.

Örneklendirme

Ben sizler için daire ve kare hazırladım. Hazırladığım örneğin kodları ise aşağıdaki şekilde :

Çalışmanızın CSS bölümüne aşağıdaki kodları ekleyin. Burada dikdörtgen en üstte(z-index:3), onun altında daire(z-index:2) ve en altta kare(z-index:1) olarak aranje ettik.


.daire{
z-index:2;
width:100px;
height:100px;
padding:50px;
border-radius:100px;
background-color:#c9537c;
position:absolute;
}

.kare{
z-index:1;
width:200px;
height:200px;
background-color:#31b4d2;
position:absolute;
}

.diktortgen{
z-index:3;
width:300px;
padding:10px;
height:20px;
margin:80px 0 0 -60px;
background-color:#82ad77;
text-align:center;
color:white;
font: 15px verdana;
position:absolute;
}

HTML kodlarımız ise aşağıdaki şekilde;

<div class="daire"></div><div class="kare"></div><div class="diktortgen">adobewordpress.com</div>

Uygulama

Z-Index genel anlamıyla bu kadar. Umarım örneklendirmeler yeterli olmuştur.