Z-Index Inspector раскрывает полный порядок наложения каждого элемента на веб-странице. Каждый элемент со значением z-index выделяется и подписывается прямо на странице, а отсортированная панель карты слоёв отображает все слои z-index снизу вверх. Инструмент определяет контексты наложения, созданные свойствами position, transform, opacity и другими CSS-свойствами — наконец-то делая отладку z-index визуальной и понятной.
Ошибки z-index — одни из самых раздражающих проблем в CSS. Модальное окно, которое должно отображаться поверх всего, скрыто за боковой панелью. Выпадающее меню исчезает за следующей секцией. Подсказка не видна, потому что родительский элемент создаёт неожиданный контекст наложения. Первопричина почти всегда — непонимание того, как работают контексты наложения, а браузерные DevTools практически не помогают их визуализировать. Z-Index Inspector делает невидимое видимым. Каждый элемент с явным z-index получает цветной overlay и метку с его значением. Отсортированная панель карты слоёв перечисляет все значения z-index снизу (наименьшие) до верха (наибольшие), показывая, какому CSS-классу или элементу принадлежит каждое значение. Самое главное — инструмент определяет границы контекстов наложения: элементы, создающие новые контексты через position + z-index, transform, opacity < 1, filter, will-change или isolation. Понимание того, какой предок создаёт контекст наложения, как правило, является ключом к исправлению ошибок z-index.
Каждый элемент со значением z-index получает полупрозрачный цветной overlay и значок-метку с числом z-index. Более высокие значения z-index отображаются тёплыми цветами (красными), более низкие — холодными (синими). Визуальное наложение делает порядок слоёв интуитивно понятным.
Боковая панель перечисляет все значения z-index, найденные на странице, отсортированные от наибольшего (верх) до наименьшего (низ). Каждая запись показывает значение z-index, CSS-селектор или имя класса и свойство position. Нажмите на любую запись, чтобы выделить соответствующий элемент на странице.
Определяет каждую границу контекста наложения на странице и 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 задан, но position равен 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).
Чат-виджеты, баннеры cookie и аналитические overlays внедряют элементы с высокими значениями z-index. Z-Index Inspector точно показывает, какие значения они используют, помогая правильно задать собственные значения z-index и избежать конфликтов.
Просматривайте все контексты наложения на странице, чтобы найти лишние. Свойства transform, filter и opacity, применяемые для визуальных эффектов, могут непреднамеренно создавать контексты наложения, вызывающие проблемы с z-index в других местах. Список контекстов делает их все видимыми.
Откройте плавающую панель DevSuite Pro и нажмите на иконку Z-Index Inspector. Инструмент сканирует страницу и определяет каждый элемент со значением z-index и каждую границу контекста наложения.
Элементы со значениями z-index получают цветные overlays прямо на странице с метками, показывающими их числа z-index. Более высокие значения отображаются тёплыми цветами, более низкие — холодными.
Откройте боковую панель, чтобы увидеть все слои z-index, отсортированные от наибольшего до наименьшего. Каждая запись показывает значение, селектор и свойство position. Нажмите на любую запись, чтобы выделить элемент на странице.
Раздел «Контексты наложения» в панели перечисляет каждый элемент, создающий новый контекст наложения, и ответственное за это CSS-свойство. Как правило, это ключ к пониманию проблем с z-index.
Нажмите на любой элемент, чтобы увидеть цепочку родительских контекстов наложения — какие родительские контексты влияют на порядок его отображения. Следуйте по цепочке вверх, чтобы найти границу контекста, вызывающую проблему с наложением.
Установите DevSuite Pro бесплатно и разблокируйте более 39 инструментов разработчика для вашего браузера.
