Урок 19. Обзор урока: z-index и контекст наложения (stacking context)

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

⚡ Кратко

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

О чём урок

Вы научитесь предсказывать, какой элемент окажется выше, почему z-index: 9999 иногда не работает, и как проектировать слои без хаоса.

контент · z: 0 dropdown · z: 20 overlay · z: 40 modal · z: 50
Шкала слоёв интерфейса: чем выше по оси z, тем больше z-index.

Структура урока

Теория

Порядок наложения, stacking context, локальные слои.

Справочник

Свойства, которые влияют на слои.

Примеры

Бейджи, модальные окна, конфликт слоёв.

Старый vs Новый

999999 против системной шкалы слоёв.

Задания

Практика с карточками и overlay.

Решения

Готовые ответы с объяснениями.

Ошибки

Почему слой не поднимается.

Домашнее задание

Мини-компонент с badge, tooltip и modal-layer.

Ресурсы

Документация и чек-листы.

Практика

  • Создать карточку с бейджем поверх изображения.
  • Смоделировать модальное окно с затемнением.
  • Найти, какой родитель создал stacking context.

Навигация