Термин

Z-index: почему один элемент перекрывает другой

Z-index — CSS-свойство, задающее уровень наложения элемента в соответствующем контексте наложения.

Что означает термин#

Большое число не гарантирует положение поверх всех элементов страницы. Вложенные контексты сравниваются как отдельные группы, поэтому дочерний блок не обязательно перекроет соседний контекст родителя. Причину часто нужно искать в структуре и свойствах предков.

Практический пример#

Выпадающее меню имеет z-index: 9999, но остаётся под соседним блоком. Родитель меню создаёт собственный контекст ниже соседнего. Повышение числа у самого меню не решает исходное соотношение. Исправление требует понимания того, какие контейнеры участвуют в наложении.

Как проверить#

В DevTools проверьте позиционирование, контексты предков и свойства вроде transform, влияющие на их создание. Затем протестируйте меню, модальные окна и закреплённую шапку вместе. Не исправляйте каждое перекрытие случайным огромным числом: согласованный порядок слоёв проще поддерживать и проверять на разных ширинах.

Источники#

Проверены 23 октября 2026 г.. Официальные рекомендации отделены от наших примеров и результатов проверки.

Продолжить разбор