Z-Index Denetçisi bir web sayfasındaki her öğenin tam yığınlama sırasını ortaya çıkarır. Z-index değerine sahip her öğe doğrudan sayfada vurgulanır ve etiketlenir ve sıralı bir katman haritası paneli tüm z-index katmanlarını alttan üste gösterir. Position, transform, opacity ve diğer CSS özellikleri tarafından oluşturulan yığınlama bağlamlarını tanımlar — sonunda z-index ayıklamayı görsel ve sezgisel hale getirir.
Z-index hataları CSS'teki en sinir bozucu sorunlardan bazılarıdır. Her şeyin üzerinde görünmesi gereken bir modal, bir kenar çubuğunun arkasına gizlenmiştir. Açılır menü bir sonraki bölümün arkasında kaybolur. Üst öğe beklenmeyen bir yığınlama bağlamı oluşturduğu için bir ipucu görünmezdir. Kök neden neredeyse her zaman yığınlama bağlamlarının nasıl çalıştığının yanlış anlaşılmasıdır — ve tarayıcı DevTools bunları görselleştirmenize neredeyse hiç yardım etmez. Z-Index Denetçisi görünmez olanı görünür kılar. Açık bir z-index'e sahip her öğe renkli bir kaplama ve değerini gösteren bir etiket alır. Sıralı bir katman haritası paneli tüm z-index değerlerini alttan (en düşük) üste (en yüksek) listeleyerek her değerin hangi CSS sınıfına veya öğeye ait olduğunu gösterir. En önemlisi, araç yığınlama bağlamı sınırlarını tanımlar — position + z-index, transform, opacity < 1, filter, will-change veya isolation yoluyla yeni yığınlama bağlamları oluşturan öğeleri. Yığınlama bağlamını hangi atanın oluşturduğunu anlamak genellikle z-index hatalarını düzeltmenin anahtarıdır.
Z-index değerine sahip her öğe yarı saydam renkli bir kaplama ve z-index numarasını gösteren bir etiket rozeti alır. Daha yüksek z-index değerleri daha sıcak renkler (kırmızılar), daha düşük değerler daha soğuk renkler (maviler) alır. Görsel katmanlama yığınlama sırasını anında sezgisel kılar.
Bir yan panel sayfada bulunan tüm z-index değerlerini en yüksekten (üst) en düşüğe (alt) sıralanmış olarak listeler. Her giriş z-index değerini, CSS seçicisini veya sınıf adını ve position özelliğini gösterir. Sayfadaki karşılık gelen öğeyi vurgulamak için herhangi bir girişe tıklayın.
Sayfadaki her yığınlama bağlamı sınırını ve onu oluşturan CSS özelliğini tanımlar — z-index ile position: relative/absolute, transform, opacity < 1, filter, will-change, isolation: isolate veya contain: layout. Bunlar ayrı olarak listelenir, böylece bir z-index değerinin neden beklendiği gibi davranmadığını izleyebilirsiniz.
Sayfadaki karşılık gelen öğeyi vurgulamak ve ona kaydırmak için paneldeki herhangi bir katmana tıklayın. Veya sayfadaki herhangi bir vurgulanmış öğeye tıklayarak onu katman haritası panelinde bulun. Doğal olan yönde yığınlama sırasında gezinin.
Z-index yalnızca konumlandırılmış öğelere uygulandığından, her katman girişi öğenin CSS position değerini (static, relative, absolute, fixed, sticky) gösterir. Z-index'in ayarlandığı ancak position'ın static olduğu durumları tespit edin — z-index'in etkisi olmayan yaygın bir hata.
Seçilen herhangi bir öğe için, köke kadar olan ata yığınlama bağlamlarının tam zincirini görün. Öğenin z-index kapsamını hangi ata yığınlama bağlamının sınırladığını tam olarak anlayın — çoğu z-index ayıklama için önemli bilgi.
Z-index: 9999 olan bir modal, z-index: 10 olan bir kenar çubuğunun arkasında gizli. Nasıl? Z-Index Denetçisi modal'ın üstünün position: relative olduğunu ve z-index: 1 ile bir yığınlama bağlamı oluşturduğunu gösterirken, kenar çubuğunun üstünün z-index: 2 olduğunu gösterir. Modal asla üstünün bağlamından kaçamaz.
Açılır bir menü açıldığında bir sonraki bölümün arkasında kaybolur. Denetçi menünün kapsayıcısının overflow: hidden olduğunu (bu da bir yığınlama bağlamı oluşturur) veya bir sonraki bölümün daha yüksek bir z-index'e sahip olduğunu ortaya çıkarır. Görsel katman vurgulama örtüşmeyi belirgin kılar.
Zamanla z-index değerleri birikir: 10, 100, 999, 9999, 99999. Katman haritası tüm sıralanmış değerleri gösterir, böylece gerçekten ihtiyaç duyulan aralığı belirlemeyi ve temiz bir ölçeğe (1, 2, 3, 10, 100) basitleştirmeyi kolaylaştırır.
Sohbet widget'ları, çerez banner'ları ve analitik kaplamalar yüksek z-index değerlerine sahip öğeler enjekte eder. Z-Index Denetçisi tam olarak hangi değerleri kullandıklarını gösterir ve çakışmaları önlemek için kendi z-index değerlerinizi uygun şekilde ayarlamanıza yardımcı olur.
Gereksiz olanları kontrol etmek için sayfadaki tüm yığınlama bağlamlarını inceleyin. Görsel efektler için uygulanan dönüşümler, filtreler ve opaklık, başka yerlerde z-index sorunlarına neden olan yığınlama bağlamlarını istemeden oluşturabilir. Bağlam listesi hepsini görünür kılar.
DevSuite Pro yüzen yuvasını açın ve Z-Index Denetçisi simgesine tıklayın. Araç sayfayı tarar ve z-index değerine sahip her öğeyi ve her yığınlama bağlamı sınırını tanımlar.
Z-index değerlerine sahip öğeler doğrudan sayfada z-index numaralarını gösteren etiketlerle renkli kaplamalar alır. Daha yüksek değerler daha sıcak renklerde, daha düşük değerler daha soğuk renklerde görünür.
En yüksekten en düşüğe sıralanmış tüm z-index katmanlarını görmek için yan paneli açın. Her giriş değeri, seçiciyi ve position özelliğini gösterir. Sayfada öğeyi vurgulamak için herhangi bir girişe tıklayın.
Panelin "Yığınlama Bağlamları" bölümü yeni bir yığınlama bağlamı oluşturan her öğeyi ve sorumlu CSS özelliğini listeler. Bu genellikle z-index sorunlarını anlamanın anahtarıdır.
Ata yığınlama bağlamı zincirini görmek için herhangi bir öğeye tıklayın — hangi üst bağlamların onun oluşturma sırasını etkilediği. Yığınlama sorununa neden olan bağlam sınırını bulmak için zinciri yukarı doğru takip edin.
DevSuite Pro'yu ücretsiz yükleyin ve tarayıcınız için 39'dan fazla geliştirici aracının kilidini açın.
