Kategoriler
Kodlama

z-index; minik canavarla mücadele

z-index hakkında bazı şeyler, nedir ve ona nasıl hükmedilir.

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:

z ekseni  grafik 1
z ekseni grafik 1

Şimdi ‘z-index’, ‘z ekseni’ ile aynı şekilde çalışır ve bunu aşağıdaki grafikten görebiliriz:

Bu yüzden 'z-index' olarak adlandırılır çünkü elemanlar z ekseni boyunca sıralanır.
Bu yüzden ‘z-index’ olarak adlandırılır çünkü elemanlar z ekseni boyunca sıralanır.

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’yi 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:

z-index parent-child-effect

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.

WOLKANCA

Volkan Yılmaz

Digital Marketing & WordPress & SEO volkan@volkanyilmaz.com.tr