Kodlamayı öğrenmeye başladığımdan beri, z-index hakkında bildiğim tek şey; z-index, bir öğeyi başka bir öğenin üzerinde konumlandırmak için kullanabileceğiniz bir şey olduğuydu.
Aslında, bu doğru ve başlangıç seviyesindeki arkadaşça öğreticilerin çoğunun size söyleyeceği şey de bu ve bu konuda tüm bildiğim buydu.
Sonraları birçok projede gerekti ve beni çılgına çeviren z-index sorunuyla kişisel olarak ilgilenmek zorunda kaldım.
Konu hakkında Fatih’in yazısını da okumanızı isterim.
z-index nedir?
Her şeyden önce neden “a-index” veya “g-index” değil de “z-index”? Bunu hiç düşündünüz mü? Tamam, yani muhtemelen herkes x ve y eksenli grafiği biliyordur? Grafikteki z ekseni nedir? Neye benzediğini bilmeyenler aşağıdaki görseli inceleyebilir:
Şimdi -z-index-, -z ekseni- ile aynı şekilde çalışır ve bunu aşağıdaki grafikten görebiliriz:
z-index nasıl evcilleştirilir!
Z-index oldukça basit görünebilir, ancak bunun altında yatan kavramlardan bazılarını anlamak zor olabilir, z-index kullanarak canınızın sıkılması olasıdır. Şimdi bazı kurallar hakkında konuşalım.
KURAL 1: “Yığınlama sırası” konseptini her zaman aklınızda tutun – HTML biçimlendirmesinde daha sonra gelen elemanlar, doğal bir şekilde eski elemanların üstünde olma eğiliminde olacaktır. Açtığınız kodda gri, mavi ve yeşil kutuların üst üste nasıl yığıldığını fark edebilirsiniz.
KURAL 2: z-index YALNIZCA konumlandırılmış elemanlarda çalışır – Bir eleman üzerinde fixed veya relative veya absolute bir konum özelliği ayarlamazsanız, z-index’inin bu elemanlar üzerinde herhangi bir etkisi olmayacaktır.
KURAL 3 : Bir alt öğe, üst öğenin z-index’ini alır – Şimdi parmaklarınızı çalıştırma zamanı. Devam edin ve yeni bir hale divbir ile id=”parent” tüm HTML öğelerinin üstünde. Bu div’in içine tüm div’i kesip yapıştırın id=”grey”. Nihai kod şöyledir:
<div id="parent">
<div id="grey"></div>
</div>
<div id="blue"></div>
<div id="green"></div>ve parent’e aşağıdaki CSS’i verin:
#parent{
position: relative;
z-index: 1;
}Burada ne yaptık? -Gri’yi- parent’in alt öğesi yaptık.
İşte oynamak için KURAL 3 kodepen demosu:
Sonuç
Paulo Coelho’dan alıntı yapmama izin verin:
“Yaşamdaki basit şeyler en sıradışı olanlardır; sadece bilge kişiler onları anlayabilir.”
https://tr.wikiquote.org/wiki/Paulo_Coelho / Simyacı – 1988
Umarım bunu okumak sizi biraz bilge yapmıştır!
Daha fazlası için beni Twitter’da takip edebilirsiniz.