Урок 19. Решения: z-index и контекст наложения (stacking context)

📁 Раздел: Блочная модель и позиционирование ⏱️ Время изучения: ~50 мин 🎯 Сложность: Средняя
#z-index #position #opacity #transform #isolation

⚡ Кратко

z-index управляет слоями только внутри правил наложения. Главное — понять stacking context: локальный мир слоёв, где большое число не может перепрыгнуть наружу.

Решение 1: карточка с бейджем (задания 1–2)

Карточка — контейнер (relative), бейдж и tooltip позиционируются абсолютно и поднимаются над изображением.

ХИТ подсказка
Товар
📄 lesson-19/card.css
.card         { position: relative; }
.card__badge  { position: absolute; z-index: 2; top: 10px; right: 10px; }
.card__tip    { position: absolute; z-index: 3; }

Решение 2: overlay и modal (задание 3)

Overlay затемняет страницу, modal лежит на следующем слое. Оба на уровне страницы (fixed), поэтому не зависят от бейджей карточек.

Страница под окном…
Модальное окно
📄 lesson-19/modal.css
.overlay { position: fixed; inset: 0; z-index: 40; }
.modal   { position: fixed; z-index: 50;
           top: 50%; left: 50%; transform: translate(-50%,-50%); }

Объяснение: карточные элементы сортируются внутри своей карточки, а overlay и modal живут на уровне страницы. Так слой модального окна не зависит от внутренних бейджей карточек.

Задание 4: почему z-index: 100 ниже z-index: 2

Если элемент с z-index: 100 находится внутри родителя, который сам создал stacking context (например, через transform или opacity<1) с маленьким эффективным слоем, то весь этот контекст выходит наружу как один низкий слой. Соседний элемент с z-index: 2, живущий в родительском контексте, окажется выше — потому что сравниваются контексты, а не вложенные числа.

Навигация