Урок 34 из 53 · 8 мин

z-index и слои

z-index, контекст наложения и isolation.

Под карточками

Нажимаю «Корзина» — а окошко прячется под фото!
Бро
Слои. z-index решает, кто выше. Но только внутри своего контекста наложения.

Свойство

z-index

Кто выше

Что это: Число: больше — ближе к зрителю. Работает у позиционированных элементов, флекс- и грид-детей.
Зачем: Модалки, выпадающие меню.
Как: HTML
<style> .a, .b { position: absolute; width: 70px; height: 40px; background: #fdf6ec; border: 1px solid #c8763a; padding: 6px; } .a { top: 6px; left: 6px; z-index: 2; background: #c8763a; color: white; } .b { top: 22px; left: 40px; z-index: 1; } .wrap { position: relative; height: 70px; } </style> <div class="wrap"><div class="a">z 2</div><div class="b">z 1</div></div>
Так это выглядит

Понятие

Контекст наложения

Слоёный пирог

Что это: Элемент с z-index (и opacity < 1, transform…) создаёт свой контекст: его дети не выпрыгнут выше соседей родителя, какой бы z-index ни был.
Зачем: Понять, почему z-index: 9999 «не работает».

Свойство

isolation

Свой контекст

Что это: isolation: isolate создаёт контекст наложения без побочных эффектов.
Зачем: Изолировать слои компонента от остальной страницы.
Как: HTML
<style> .card { isolation: isolate; position: relative; background: #fdf6ec; border: 1px solid #c8763a; padding: 6px; } .card::before { content: ""; position: absolute; inset: 0; background: #f0abfc; z-index: -1; } </style> <div class="card">Фон-слой не уехал под страницу</div>
Так это выглядит

Ника
Не гонись за z-index: 9999 — разберись, какой контекст наложения мешает.

Ваш ход

Задание

Окно корзины поверх

Поставь .cart-popup position: absolute и z-index: 10, чтобы окно было над карточками.

Позиционировано — пока нет
Выше карточек — пока нет

<style>
.shop { position: relative; }
.card { position: relative; z-index: 1; }
.cart-popup { top: 0; right: 0; background: white; }
</style>
<div class="shop"><div class="cart-popup">Корзина: 2</div><div class="card">Ручка</div></div>

<style>
.shop { position: relative; }
.card { position: relative; z-index: 1; }
.cart-popup { top: 0; right: 0; background: white; }
</style>
<div class="shop"><div class="cart-popup">Корзина: 2</div><div class="card">Ручка</div></div>

Результат обновляется при вводе

ПрактикаОбязательное задание

Не работает

Выберите один ответ.

Почему у ребёнка z-index: 9999 он всё равно под соседом родителя?

Домашнее заданиеДля закрепления

isolation