Слой 1
position: absolute
z-index: 1
Секция: z-index 10
Тестовая страница для проверки уведомлений
Страница содержит фиксированные, липкие, трансформированные и изолированные элементы. Используй её, чтобы проверить, поверх каких элементов выводятся уведомления.
Внутренний слой
z-index: 1
z-index: 1
Внутренний слой
z-index: 2
z-index: 2
Внутренний слой
z-index: 3
z-index: 3
Управление уведомлениями
Выбери тип, позицию, время показа и значение z-index. Изменение применяется ко всему контейнеру уведомлений.
z-index: 10000
Наложение элементов
Карточки расположены друг над другом. Чем больше значение z-index, тем выше должен находиться элемент внутри одного stacking context.
z-index: 1
Слой 2
position: absolute
z-index: 10
Слой 3
position: absolute
z-index: 100
Слой 4
position: absolute
z-index: 1000
Высокая секция для проверки прокрутки
При прокрутке шапка остаётся сверху. Уведомления имеют фиксированное позиционирование и должны оставаться на экране.
Обычная карточка
Не имеет position и z-index.
Позиционированная карточка
position: relative; z-index: 2.
Высокий локальный слой
position: relative; z-index: 200.
Высота этой области создаёт дополнительную прокрутку
Отдельные stacking context
Внутренний элемент может иметь z-index: 999999, но он всё равно ограничен родительским stacking context.
Контекст через transform
Родитель использует transform: translateZ(0).
Локальный слой
z-index: 2
z-index: 2
Локальный слой
z-index: 999999
z-index: 999999
Контекст через isolation
Родитель использует isolation: isolate.
Локальный слой
z-index: 2
z-index: 2
Локальный слой
z-index: 999999
z-index: 999999
Секция с transform
Transform создаёт новый stacking context. Это одна из частых причин, почему огромный z-index у дочернего элемента не помогает.
z-index: 99999
Часть блока обрезается, потому что у родителя установлен overflow: hidden. Увеличение z-index это не исправит.
Секция с opacity
Значение opacity меньше 1 также создаёт отдельный stacking context. Здесь можно проверить поведение своего блока уведомлений.