Контекст наложения: почему большой z-index не помогает

Назначение

Контекст наложения группирует элементы, которые располагаются по слоям относительно друг друга как самостоятельная часть внешнего порядка.

Как это работает

Новый контекст может появиться, например, у элемента с transform или определённым сочетанием position и z-index. Большой z-index потомка действует внутри его контекста и не делает его автоматически выше соседнего внешнего контекста.

Пример

.lower { position: relative; z-index: 1; }
.lower .popup { position: absolute; z-index: 9999; }
.upper { position: relative; z-index: 2; }

Что должно получиться

Окно внутри lower не обязано перекрыть upper: оно ограничено контекстом своего родителя. Фрагмент показывает причину, а полный визуальный пример требует перекрывающихся областей.

Граница применения и частая ошибка

Не увеличивайте число z-index бесконечно без изучения предков. Причиной может быть не маленькое число, а граница контекста, созданная в другом месте дерева.

Самостоятельная проверка

Найдите у перекрытого элемента предков с transform, opacity и позиционированием. В DevTools отключайте по одному правилу и фиксируйте, какое из них меняет границу наложения.

Связанные материалы

• Структура проекта
• Отладка CSS
• Консоль браузера