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

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

⚡ Кратко

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

Задания

  1. Сделайте карточку товара с изображением и бейджем «Хит» в правом верхнем углу.
  2. Добавьте tooltip, который появляется поверх карточки и не перекрывается изображением.
  3. Создайте overlay и modal так, чтобы overlay был ниже modal, но выше страницы.
  4. Объясните, почему элемент с z-index: 100 может оказаться ниже элемента с z-index: 2.

Ожидаемый результат (задания 1–2)

Бейдж в правом верхнем углу лежит поверх картинки; tooltip всплывает над карточкой:

ХИТ
Название товара
/* ваш код: .card { position: relative }
   .badge { position: absolute; z-index: 2 } */
Подсказка к заданию 4: вспомните «ловушку контекста» из теории — дело не в величине числа, а в том, в каком stacking context живёт каждый элемент.

Навигация