Z dizininizin çalışmamasının 4 nedeni (ve nasıl düzeltilir)

Z-index, elemanları üst üste katmanlar halinde yerleştirmenizi sağlayan bir CSS özelliğidir. CSS’de nasıl kullanılacağını bilmek çok yararlı ve dürüst olmak gerekirse çok önemli bir araç.

Ne yazık ki, z-index her zaman sezgisel bir şekilde davranmayan bu özelliklerden biridir. İlk önce basit görünüyor - daha yüksek bir Z-endeksi sayısı, elemanın düşük-Z-endeksi sayılarına sahip elemanların üstünde olacağı anlamına gelir. Ancak işleri daha da karmaşıklaştıran bazı ek kurallar var. Ve z-endeksini 999999 olarak ayarlayarak işleri her zaman düzeltemezsiniz!

Bu makale, z-index'in sizin için çalışmamasının en yaygın nedenlerinden dördünü ve tam olarak nasıl düzeltebileceğinizi açıklayacaktır.

Bazı gerçek kod örneklerinden geçeceğiz ve bunları çözeceğiz. Bu makaleyi okuduktan sonra, bu yaygın z-endeks tuzaklarını anlayabilecek ve bunlardan kaçınabileceksiniz!

İlk nedeni inceleyelim:

1. Aynı istifleme bağlamındaki elemanlar, eski elemanların üstünde ikinci elemanlarla birlikte görünüm sırasına göre gösterilecektir.

İlk örneğimizde, 3 ana unsur içeren nispeten basit bir düzenimiz var:

  • Bir kedinin görüntüsü
  • Metin içeren beyaz bir blok
  • Aynı kedinin başka bir görüntüsü

İşte bunun için HTML işaretlemesi:

Miyav miyav miyav ...

Bu düzende, ideal olarak beyaz metin bloğunun her iki kedinin üstünde olmasını istiyoruz.

Bunu başarmaya çalışmak için, her iki kedi resmi için CSS'ye bazı negatif kenar boşlukları ekledik, böylece beyaz blok biraz üst üste gelecekler:

.cat-top {
   kenar boşluğu: -110 piksel;
}
.cat-alt {
   Sağa çık;
   kenar boşluğu: -120 piksel;
}

Ancak, bu gibi görünüyor:

İlk kedi tam da bizim istediğimiz gibi beyaz içerik bloğunun altına yerleştirilmiş. Ancak ikinci kedi görüntüsü bloğun üstüne yerleştirildi!

Bu neden oluyor?

Bu davranışın nedeni, web sayfasındaki doğal yığınlama sırasından kaynaklanmaktadır. Bu kurallar temel olarak hangi öğelerin üstte olacağını ve hangilerinin altta olacağını belirler.

Elemanlar z-index setine sahip olmasalar bile, kafiyelerin ve hangilerinin üstte olacağına dair bir kafiye vardır.

Bizim durumumuzda, elementlerin hiçbiri z-endeks değerine sahip değildir. Bu yüzden onların yığınlanma sırası görünüm sırasına göre belirlenir. Bu kurala göre, işaretlemede daha sonra gelen unsurlar, onlardan önce gelen unsurların tepesinde olacaktır.

(İstifleme siparişi yönergelerinin daha fazlasını Mozilla Geliştirici Ağı'ndan okuyabilirsiniz.)

Örneğimizde kediler ve beyaz blok ile bu kurala uyuyorlar. Bu nedenle ilk kedi beyaz blok öğesinin altında, beyaz blok ise ikinci kedinin altında.

Tamam, istifleme sırası iyi ve iyi, ama ikinci kedi beyaz bloğun altında olacak şekilde CSS'yi nasıl ayarlayacağız?

İkinci nedene bakalım:

2. Öğenin konumu ayarlanmamış

İstifleme sırasını belirleyen diğer kurallardan biri, bir elemanın pozisyonunun ayarlanmış olup olmamasıdır.

Bir elemanın konumunu ayarlamak için, CSS position özelliğini, göreceli veya mutlak gibi, statik dışındaki herhangi bir şeye ekleyin. (Yazdığım bu yazı hakkında daha fazla bilgi edinebilirsiniz.)

Bu kurala göre, konumlandırılmış öğeler konumlandırılmamış öğelerin üstünde görüntülenir.

Bu nedenle, beyaz bloğun konumlanmasını sağlamak: göreceli ve iki kedi elemanını yerleştirilmeden bırakmak, beyaz bloğu kedilerin üzerine istifleme sıralamasına göre yerleştirecektir.

Bu şekilde görünecek - yukarıdaki Codepen ile de oynayabilirsiniz.

Bravo!

Şimdi, yapmak istediğimiz bir sonraki şey, dönüşüm özelliğini kullanarak alt kediyi baş aşağı döndürmek. Bu şekilde, her iki kedi de sadece başları dışarı çıkacak şekilde beyaz bloğun altında kalacaktır.

Ancak bunu yapmak, daha fazla z-endeksi ile ilgili karışıklığa neden olabilir. Bir sonraki kısımda sorunu ve çözümü ele alacağız.

3. Opaklık veya dönüştürme gibi bazı CSS özelliklerinin ayarlanması, elemanı yeni bir istifleme bağlamına koyacaktır.

Daha önce de belirttiğimiz gibi, alt kediyi ters çevirmek istiyoruz. Bunu gerçekleştirmek için, dönüşüm ekleyeceğiz: rotate (180deg).

.cat-alt {
   Sağa çık;
   kenar boşluğu: -120 piksel;
   dönüşümü: döndür (180 derece);
}

Ancak bu, alt kedinin tekrar beyaz bloğun üstünde görüntülenmesine neden olur!

Burada neler oluyor?

Sık sık bu soruna rastlayamazsınız, ancak yığınlama sırasının başka bir yönü, dönüştürme veya opaklık gibi bazı CSS özelliklerinin öğeyi kendi yeni yığınlama bağlamına koyacağıdır.

Bunun anlamı, dönüştürmeyi .cat-alt elemana eklemenin, 0'lık bir z-indeksine sahipmiş gibi davranmasını sağlar. Konumu veya z-indeksi ayarlanmamış olsa bile! (W3.org 'un opacity özelliği ile nasıl çalıştığı hakkında bilgilendirici ama oldukça yoğun bir dokümantasyona sahip)

Unutmayın, hiçbir zaman beyaz bloğa bir z indeksi değeri eklemedik, sadece konum: göreceli. Bu, beyaz bloğu konumlandırılmamış kedilerin üzerine yerleştirmek için yeterliydi.

Fakat .bottom-cat elemanı göreceli olarak z-index: 0 ile konumlandırılmış gibi davrandığından, dönüşüm onu ​​beyaz bloğun üzerine yerleştirmiştir.

Bunun çözümü pozisyonu belirlemektir: En azından beyaz blokta göreceli ve açıkça ayarlanmış z-endeksi. Bir adım daha ileri gidebilir ve konum belirleyebilirsin: sadece daha güvenli olması için, kedi elemanları üzerinde göreceli ve daha düşük bir z indeksi.

.content__block {
   pozisyon: göreceli;
   z-endeksi: 2;
}
.cat-top, .cat-alt {
   pozisyon: göreceli; z-endeksi: 1;
}

Bence, bunu yapmak, en temel z-endeks sorunlarının tümü olmasa da en iyisini çözecektir.

Şimdi, z-indeksinizin çalışmamasının son nedenine geçelim. Bu biraz daha karmaşık, çünkü ebeveyn ve alt öğeleri içerir.

4. Öğe, üst düzeyinin z-indeks seviyesinden dolayı daha düşük bir istifleme bağlamındadır

Bunun için kod örneğimize bakalım:

İşte elimizde: Düzenli içeriğe sahip basit bir web sayfası ve içeriğin üzerine yerleştirilmiş "Geri Bildirim Gönder" yazan pembe bir yan sekme var.

Ardından kedinin fotoğrafını tıkladığınızda, şeffaf gri arka plan kaplaması olan bir kalıcı pencere açılır.

Bununla birlikte, kalıcı pencere açık olsa bile, yan tırnak gri kaplamanın üstündedir. Yan sekme de dahil olmak üzere kaplamanın her şeyin üstünde görüntülenmesini istiyoruz.

Söz konusu öğeler için CSS'ye bir göz atalım:

.content {
   pozisyon: göreceli;
   z-endeksi: 1;
}
.modal {
   pozisyon: sabit;
   z-endeksi: 100;
}
.side-tab {
   pozisyon: sabit;
   z-endeksi: 5;
}

Tüm elemanlar kendi pozisyon ayarlarına sahiptir ve yan tırnak z-endeksinde bulunan içerik elemanının üstüne yerleştirilmiş 5 olan bir z-endeksine sahiptir: 1.

Ardından, modelin z dizini: 100'dür, ki bu dizini z dizininin yan tarafına koymalıdır: 5. Bunun yerine, model yer paylaşımı yan dizinin altındadır.

Bu neden oluyor?

Önceden, öğenin konumu ayarlanmışsa ve işaretleme sırasındaki sırasındaki gibi, istifleme bağlamına giren bazı faktörleri ele almıştık.

Ancak yine de istifleme bağlamının bir başka yönü, bir alt elemanın ebeveyninin istifleme bağlamı ile sınırlı olmasıdır.

Söz konusu üç unsura daha yakından bakalım.

İşte elimizdeki işaretleme:

    

İşaretlemeye baktığımızda, içerik ve yan sekme elemanlarının kardeş olduğunu görebiliriz. Yani, işaretlemede aynı seviyede bulunurlar (bu z-index seviyesinden farklıdır). Modal, içerik öğesinin bir alt öğesidir.

Kalıcı içerik öğesinin içinde olduğu için, 100'lük z-dizini yalnızca üst öğe, içerik öğesinin içinde bir etkiye sahiptir. Örneğin, modda kardeş olan başka alt öğeler olsaydı, z indeksi değerleri onları üst üste ya da altına koyardı.

Ancak, bu alt öğelerin z indeksi değeri üst öğenin dışında bir şey ifade etmez, çünkü üst içerik öğesinin z dizini 1 olarak ayarlanır.

Dolayısıyla, modal dahil çocukları, bu z-endeks seviyesinden çıkamıyor.

(Bu biraz moral bozucu metaforla bunu hatırlayabilirsiniz: bir çocuk ailesiyle sınırlanabilir ve onlardan kurtulmaz.)

Bu sorunun birkaç çözümü var:

Çözüm: Kalıcıyı içerik üst öğesinin dışına ve sayfanın ana yığınlama içeriğine taşıyın.

Düzeltilmiş işaretleme şöyle görünür:

Şimdi, modal eleman, diğer ikisi için bir kardeş elemandır. Bu, her üç öğeyi de kendileriyle aynı istifleme bağlamına sokar, böylece z-endeks seviyelerinin her biri şimdi birbirini etkiler.

Bu yeni istifleme bağlamında, elemanlar yukarıdan aşağıya doğru aşağıdaki sırayla gösterilecektir:

  • modal (z-endeksi: 100)
  • yan sekme (z-endeksi: 5)
  • içerik (z-endeksi: 1)

Alternatif Çözüm: İçeriği konumlandırmayı kaldırın, böylece modal’in z-endeksini sınırlandırmaz.

İşaretlemeyi istemiyorsanız veya değiştiremiyorsanız, konum ayarını içerik öğesinden kaldırarak bu sorunu çözebilirsiniz:

.content {
   // Konum belirlenmedi
}
.modal {
   pozisyon: mutlak;
   z-endeksi: 100;
}
.side-tab {
   pozisyon: mutlak;
   z-endeksi: 5;
}

İçerik öğesi artık konumlandırılmadığından, kalıcı modun z indeks değerini artık sınırlandırmayacak. Böylece, açık mod, yüksek z-endeksi 100 olduğundan, yan sekme elemanının üstüne yerleştirilecektir.

Bu işe yarıyor, ben şahsen ilk çözüm için giderdim.

Zira ileride bir nedenden ötürü içerik öğesini konumlandırmanız gerekiyorsa, modal’ın sırasını istifleme bağlamında yeniden sınırlar.

Özetle

Umarım bu öğreticiyi yararlı bulmuşsunuzdur! Özetlemek gerekirse, z-endeksi ile ilgili sorunların çoğu bu iki yönergeyi izleyerek çözülebilir:

  1. Elemanların konum ve z indeks numaralarının doğru sırada olup olmadığını kontrol ediniz.
  2. Çocuklarının z-indeks seviyesini sınırlayan ana unsurların olmadığından emin olun.

Kaynaklar:

  • W3.org: Şeffaflık: "opaklık" özelliği
  • W3.org: Yığın seviyesini belirlemek
  • Mozilla Developer Network: Yığınlama Bağlamı
  • PhilipWalton.com: Hiç kimse Z-index hakkında söylemedi
  • Smashing Magazine: Z-endeksi CSS Özelliği

Daha fazla istemek?

Blog Blogumda, coder-coder.com adresinde daha fazla öğretici okuyun.
Articles Yeni makaleler hakkında e-postalar almak için buradan kaydolun.
,000 25.000+ diğer üyeye katılın - @codercoder Resimlerini takip edin.