CSS ‘te z-index Kullanımı

Merhaba Arkadaşlar,

Bu makalede sizlere CSS ile tasarladığınız web sayfalarında katmanlı kullanım için bir numaralı yardımcılarımızdan olan z-index ‘i anlatmaya çalışacağım. Z-index genellikle tasarımlarda üst üste gelecek kutularda sıralandırma yaparak istediğimiz görüntünün ortaya çıkmasını sağlamak amacıyla kullanılır. Z-index değeri en yüksek olan kutu her zaman için en üstte yer almaktadır.

Bu uygulamamıza baktığımızda elimizde iki adet dosyanın olmasına ihtiyaç vardır. Bunlar ” index.html ” ve ” stil.css ” tir. Bu dosyalarımızı oluşturuyoruz ve kod yazmaya ilk olarak ” index.html ” dosyamızdan başlıyoruz. Dosyamızı açtığımızda ilk olarak klasik kodlarımızı ekliyoruz ve ardından body tag ‘lerinin içerisine 3 adet div ekliyoruz. Div ‘lerimizin isimleri ” uyg1 , uyg2 , uyg3 ” şeklinde olacaktır.


    BilgiSayaci.Org - Css 'te z-index Kullanımı
</pre>
<div class="uyg1"></div>
<div class="uyg2"></div>
<div class="uyg3"></div>
<pre>

Bu basit kod bloğumuzu yazdıktan sonra sıra geldi stil sayfamızı hazırlamaya ilk olarak üç adet div ‘imizin boyutlandırmasını yapacağız. İşlemimizin daha anlaşılır bir durumda olması için uyg1 div ‘imizi 200*200 , uyg2 div ‘imizi 150*150 , uyg3 div ‘imizi 100*100 boyutlarını veriyoruz ve ilk görüntülerini alabilmek için position özelliklerini katmadan şu şekilde stil.css sayfamıza ekliyoruz.

.uyg1{width: 200px; height: 200px; background-color: #ff0000; border: 2px solid #000000;}
.uyg2{width: 150px; height: 150px; background-color: #0006ff; border: 2px solid #000000;}
.uyg3{width: 100px; height: 100px; background-color: #00ff36; border: 2px solid #000000;}

İlk görüntü için index.html sayfamızı çalıştırdığımızda büyükten küçüğe doğru alt alta sıralanmış üç adet farklı renkte kutu görülmelidir. Bu görüntüyü aldıysanız bu doğru yoldasınız demektir 🙂

Şimdi sıra div ‘lerimizin position değerlerini atamaya geldi. Bunun için her üç div ‘imiz içinde position değerini ” absolute ” vererek en küçük div en üste gelecek şekilde bir görüntü elde ediyoruz.

.uyg1{width: 200px; height: 200px; background-color: #ff0000; border: 2px solid #000000; position: absolute;}
.uyg2{width: 150px; height: 150px; background-color: #0006ff; border: 2px solid #000000; position: absolute;}
.uyg3{width: 100px; height: 100px; background-color: #00ff36; border: 2px solid #000000; position: absolute;}

Yukarıda belirttiğim görüntü de elde edildiyse artık asıl işlemimize geçebiliriz. Position değerleri verildikten sonra uyg1 en altta uyg2 ortada ve uyg3 en üstte olacak şekilde bir görüntü ortaya çıkmıştı. Z-index değerimizi verirken isterseniz öncelikle sıralamayı uyg1 en üstte uyg2 ortada ve uyg3 en altta olacak şekilde yapalım.

.uyg1{width: 200px; height: 200px; background-color: #ff0000; border: 2px solid #000000; position: absolute; z-index: 3}
.uyg2{width: 150px; height: 150px; background-color: #0006ff; border: 2px solid #000000; position: absolute; z-index: 2}
.uyg3{width: 100px; height: 100px; background-color: #00ff36; border: 2px solid #000000; position: absolute; z-index: 1}

Bu kodu yazdıktan sonra uygulamayı çalıştırdığınızda ekranda sadece kırmızı arka plan lı olan div ‘imiz uyg1 ‘i göreceksiniz.

Peki bu neye göre belirlendi ?

Yazının başında da belirttiğim gibi kaç adet kutu olursa olsun her zaman için z-index değeri en yüksek olan kutu en üste alınır. Değer veren sayılar ile oynadığınız takdirde sıralamaların değiştiğini göreceksiniz.

Nerede Kullanabilirim ?

Örnek vermek gerekirse elinizde bir film afişi ve onun çevresinde oluşturulmuş bir çerçeve resmi var. Eğer elinizdeki afiş sabit kalacak ise resim ile çerçeveyi birleştirerek düzgün bir görünüm elde edebilirsiniz ama çerçevenin sabit ve resmin değişken olduğu durumlarda ise çerçevenin z-index değerini resimden yüksek vererek değişimlerde olası kazalardan korunmuş olabilirsiniz.

Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 5 No ‘lu Maddeden İndirebilirsiniz..

Reklam

Tüm Yorumlar

Leave a Reply

Your email address will not be published. Required fields are marked *