CSS z-index Özelliği Nedir ve Nasıl Uygulanır?
CSS z-index (sıralama), elemanları uygulanmış katmanların z-eksenindeki konumu belirlemek için kullanılır. z-index tüm elemanlara uygulanamaz. Sadece konumlandırma değeri atanmış elemanlara uygulanır. Bunun anlamı eğer bir elemanı aynı z-ekseni üzerinde üste veya alt sıraya atmak istiyorsanız ilk olarak konumlandırma değeri atamalısınız. z-index değeri dokümanımızdaki elemanların istiflenme sıralarını belirler. z-index elemanları z ekseninde nerede duracağını belirler. z-indeks değeri küçük olan elemanlar altta büyük olan elemanlar ise üstte görünecektir. Sitenizi kodlarken birçok yerde z-index ihtiyaç duymayız çünkü normal sayfa akışında elemanlar yan yana durduğu için böyle bir özelliğe ihtiyaç yoktur, ne zamanki elemanlara konumlandırma değeri tanımladığımızda elemanlar birbiri üzerine bindiğinde z-index değerine ihtiyaç duyarız. z-index mutlak, göreceli ve sabit konumlandırma atandığı veya elemana eksi değer verilerek konumu değiştirildiğinde uygulanır.
Yapısı: z-index: <deger>
Aldığı Değerler: <sayısal deger> | auto | inherit
Başlangıç Değeri: auto
Uygulanabilen Elemanlar: Konumlandırılmış elemanlara
Kalıtsallık: Yok
Konumlandırma değeri relative, absolute ve fixed uygulanmış katmanların görünürlüğünü z-index ile ayarlayabiliriz.
div
{
position:absolute;
width:150px;
height:150px;
}
div.bir
{
background: #FEB3BE;
border:2px solid red;
top: 0;205
left: 0;
}
div.iki
{
background: #E5ECF9;
border:2px solid blue;
top: 10px;
left: 10px;
}
Yukarıda örnekte görüldüğü gibi katmanlar üst üste sıralanmıştır. Birbirinden 10px üst ve 10px soldan mesafe bırakılmıştır. Üstte kalan katman alttakileri gizlemiştir. Tüm katmanların z-index değeri atanmamıştır. Bu nedenle başlangıç değeri olan z-index:auto değerini almışlardır.
<body> <div class=’kapsul’> <div class=’bir’></div> <div class=’iki’></div> </div> </body>
z-index değeri otomatik olduğu için her katman HTML’deki sırasına göre yerleşmiştir. İlk başta yazılmış olanlar altta sonrakiler üstte olacak şekilde sıralanmıştır. Eğer katmanları istediğimiz sıra ile göstermek istiyor isek her katmana sırasına göre sayısal değer atamalıyız. Yüksek değer alan katmanlar üstte, düşük değer alan katmanlar ise altta kalacaktır. Buna göre istediğimiz görüntüyü elde etmek için z-index değerleri vermeliyiz. Yukarıda yaptığımız örnekte alttaki kırmızı katmanı üste çıkarmak için zindex değerini 2 verelim. Mavi katmanın z-index değerini 1 verelim. Katmanların görünümü tersine dönecektir.
div
{
position:absolute;
width:150px;
height:150px;
}
div.bir
{
background: #FEB3BE;
border:2px solid red;
top: 0;
left: 0;
z-index:2
}
div.iki
{
background: #E5ECF9;
border:2px solid blue;
top: 10px;
left: 10px;
z-index:1
}
CSS z-index (sıralama) özelliği konusunu gördük. Konu ile ilgili soru, öneri ya da fikirlerinizi aşağıda bulunan yorumlar kısmına yazarak bize iletebilirsiniz. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.
https://yazilimdelisi.com/category/web-gelistirme/css/
Sosyal Medya Hesaplarımız
