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.