Z-index в CSS
Урок Position расставил блоки. z-index отвечает на следующий вопрос: когда два блока перекрываются, какой ближе к читателю? Представьте листы бумаги на столе — верхние закрывают нижние. Сначала освойте повседневные правила, а не огромные числа.
Набор инструментов z-index
📊 Z-index одним взглядом
| Идея | Повседневная роль |
|---|---|
z-index |
Задаёт порядок отрисовки перекрывающихся соседей в одном stacking context |
| Сначала позиционирование | Обычно нужен position не static (или некоторые дети современного layout) |
| Больше — выше | Большие целые рисуются позже — оказываются сверху |
auto |
По умолчанию — порядок документа и правила родительского контекста |
| Stacking context | «Клетка» — дети сравниваются друг с другом, а не со всей страницей |
| Спокойная шкала | Малые шаги (1, 2, 10) и именованные роли вместо гонок 9999 |
z-index не сдвигает блок влево или вправо. Он лишь меняет, кто кого перекрывает, когда блоки уже делят одно экранное пространство.
Поднимите бейдж над карточкой
Дайте карточке позиционированный «дом», затем поднимите бейдж скромным z-index. Порядок соседей иногда достаточен, но явный слой делает намерение читаемым.
.card {
position: relative;
}
.card__badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 2;
padding: 0.2rem 0.45rem;
background: #0b5fff;
color: #fff;
}
Оверлей над страницей
Модалки и выдвижные панели обычно сидят выше обычного контента. Сочетайте позиционированный оверлей с ясным номером слоя — и намеренно держите контент страницы ниже.
.page {
position: relative;
z-index: 1;
}
.modal {
position: fixed;
inset: 0;
z-index: 10;
background: rgba(0, 0, 0, 0.45);
}
Сравнивайте соседей, а не весь мир
Среди соседей в одном контексте побеждает больший z-index. При равенстве обычно сверху рисуются поздние соседи в DOM. Начинайте сравнение внутри одного родителя, прежде чем устраивать войны на всю страницу.
.stack {
position: relative;
}
.stack .card-a {
position: absolute;
z-index: 1;
}
.stack .card-b {
position: absolute;
z-index: 2;
}
Stacking context запирает детей
Родитель с собственным stacking context (например, позиционированный + z-index) может заточить детей. Ребёнок с z-index: 999 не перепрыгнет соседа вне этого родителя, если сам родитель ниже. Чините слой родителя — не раздувайте только ребёнка.
.panel {
position: relative;
z-index: 1;
}
.panel .popup {
position: absolute;
z-index: 999;
}
.toast {
position: fixed;
z-index: 5;
}
Спокойная привычка z-index
Именуйте роли (--layer-badge, --layer-modal) или используйте маленькую шкалу. Избегайте 99999, кроме отладки. Помните: размещение — это position; слои — это z-index; очистка float ждёт следующих уроков.
:root {
--layer-base: 1;
--layer-badge: 2;
--layer-modal: 10;
}
.badge {
position: absolute;
z-index: var(--layer-badge);
}
.modal {
position: fixed;
z-index: var(--layer-modal);
}
Попробуйте сами
- Поставьте absolute-бейдж на relative-карточку и задайте
z-index: 2. - Сделайте fixed-фон/модалку с
z-index: 10над контентом страницы на1. - Дайте двум перекрывающимся absolute-соседям разные z-index и поменяйте их местами.
- Вложите ребёнка с высоким z-index в родителя с низким — наблюдайте клетку.
- Перепишите один «9999» в именованную шкалу custom properties.
Типичные ошибки
- Ожидать, что
z-indexна обычномstatic-блоке переставит всё - Бороться со stacking context, поднимая только вложенного ребёнка
- Гоняться с
99999вместо читаемой шкалы - Путать этот урок с Position (размещение) или Display (тип блока)
- Использовать z-index для «колонок страницы» вместо инструментов layout
Кратко
z-indexрешает, кто рисуется сверху при перекрытии- Обычно нужен не-static position (или особые случаи layout)
- Большие значения побеждают внутри одного stacking context
- Родительские контексты могут запирать детей — чините нужный уровень
- Предпочитайте малые именованные шкалы; float оставьте следующим урокам
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху