Z-Index Inspector разкрива пълния ред на наслагване на всеки елемент на уебстраницата. Всеки елемент със стойност на z-index е подчертан и обозначен директно на страницата, а сортиран панел с карта на слоевете показва всички z-index слоеве отдолу нагоре. Идентифицира контекстите на наслагване (stacking contexts), създадени от свойствата position, transform, opacity и други CSS свойства — най-накрая правейки дебъгването на z-index визуално и интуитивно.
Грешките със z-index са едни от най-фрустриращите проблеми в CSS. Модален прозорец, който трябва да се появи над всичко останало, е скрит зад странична лента. Падащо меню изчезва зад следващата секция. Подсказка (tooltip) е невидима, защото родителският елемент създава неочакван контекст на наслагване. Основната причина почти винаги е неразбиране на това как работят контекстите на наслагване (stacking contexts) — а браузърните DevTools почти не ви помагат да ги визуализирате. Z-Index Inspector прави невидимото видимо. Всеки елемент с изричен z-index получава цветен слой и етикет, показващ неговата стойност. Сортиран панел с карта на слоевете изброява всички стойности на z-index от дъното (най-ниската) до върха (най-високата), показвайки към кой CSS клас или елемент принадлежи всяка стойност. Най-важното е, че инструментът идентифицира границите на контекста на наслагване — елементи, които създават нови контексти чрез position + z-index, transform, opacity < 1, filter, will-change или isolation. Разбирането на това кой прародител (ancestor) създава контекста на наслагване обикновено е ключът към коригирането на грешки със z-index.
Всеки елемент със стойност на z-index получава полупрозрачен цветен слой и значка с етикет, показваща неговия z-index номер. По-високите стойности на z-index получават по-топли цветове (червени), по-ниските стойности получават по-студени цветове (сини). Визуалното наслояване прави реда на наслагване веднага интуитивен.
Страничен панел изброява всички стойности на z-index, намерени в страницата, сортирани от най-високата (отгоре) до най-ниската (отдолу). Всеки запис показва стойността на z-index, името на CSS селектора или класа и свойството position. Щракнете върху всеки запис, за да подчертаете съответния елемент на страницата.
Идентифицира всяка граница на контекста на наслагване (stacking context) на страницата и CSS свойството, което го създава — position: relative/absolute със z-index, transform, opacity < 1, filter, will-change, isolation: isolate или contain: layout. Те са изброени поотделно, за да можете да проследите защо дадена стойност на z-index не се държи според очакванията.
Изберете произволен слой в панела, за да подчертаете и превъртите до съответния елемент на страницата. Или кликнете върху подчертан елемент на страницата, за да го намерите в панела с картата на слоевете. Навигирайте в реда на наслагване в посоката, която ви е по-удобна.
Всеки запис на слой показва CSS стойността на свойството position на елемента (static, relative, absolute, fixed, sticky), тъй като z-index се прилага само към позиционирани елементи. Откривайте случаи, в които е зададен z-index, но позицията е static — често срещана грешка, при която z-index няма ефект.
За всеки избран елемент вижте пълната верига от родителски контексти на наслагване до корена. Разберете точно контекстът на наслагване на кой прародител ограничава обхвата на z-index на елемента — ключово прозрение за повечето дебъгвания на z-index.
Модален прозорец със z-index: 9999 е скрит зад странична лента със z-index: 10. Как е възможно? Z-Index Inspector показва, че родителят на модалния прозорец има position: relative и създава контекст на наслагване със z-index: 1, докато родителят на страничната лента има z-index: 2. Модалният прозорец никога не може да излезе от контекста на своя родител.
Падащо меню изчезва зад следващата секция, когато се отвори. Инспекторът разкрива, что контейнерът на менюто има overflow: hidden (което също създава контекст на наслагване) или че следващата секция има по-висок z-index. Визуалното подчертаване на слоевете прави застъпването очевидно.
С течение на времето стойностите на z-index се натрупват: 10, 100, 999, 9999, 99999. Картата на слоевете показва всички стойности сортирани, което улеснява идентифицирането на действителния необходим диапазон и опростяването до чиста скала (1, 2, 3, 10, 100).
Уиджетите за чат, банерите за бисквитки и слоевете за анализи вмъкват елементи с високи стойности на z-index. Z-Index Inspector показва точно какви стойности използват те, помагайки ви да зададете вашите собствени z-index стойности по подходящ начин, за да избегнете конфликти.
Прегледайте всички контексти на наслагване на страницата, за да проверите за излишни такива. Трансформациите (transforms), филтрите и прозрачността (opacity), приложени за визуални ефекти, могат неволно да създадат контексти на наслагване, които причиняват проблеми със z-index на други места. Списъкът с контексти ги прави всички видими.
Отворете плаващия док DevSuite Pro и щракнете върху иконата Z-Index Inspector. Инструментът сканира страницата и идентифицира всеки елемент със стойност на z-index и всяка граница на контекста на наслагване.
Елементите със стойности на z-index получават цветни слоеве директно върху страницата, с етикети, показващи техните z-index номера. По-високите стойности се появяват с по-топли цветове, по-ниските стойности с по-студени цветове.
Отворете страничния панел, за да видите всички z-index слоеве, сортирани от най-високия към най-ниския. Всеки запис показва стойността, селектора и свойството position. Щракнете върху всеки запис, за да подчертаете елемента на страницата.
Секцията „Stacking Contexts“ (Контексти на наслагване) в панела изброява всеки елемент, който създава нов контекст на наслагване, и съответното CSS свойство, отговорно за това. Това обикновено е ключът към разбирането на z-index проблемите.
Кликнете върху който и да е елемент, за да видите неговата верига от прародителски контексти — кои родителски контексти влияят върху неговия ред на рендиране. Следвайте веригата нагоре, за да намерите границата на контекста, която причинява проблема с наслагването.
Инсталирайте DevSuite Pro безплатно и отключете 39+ инструмента за разработчици за вашия браузър.
