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

Задача: сверстайте карточку курса с изображением, бейджем, tooltip и кнопкой, которая открывает визуальный modal-layer.

Разметка

Создайте .course-card, .badge, .tooltip, .overlay, .modal.

Слои

Задайте шкалу слоёв: карточка — базовый слой, badge — 2, overlay — 40, modal — 50.

📄 lesson-19/homework.css

:root {
  --layer-card-badge: 2;
  --layer-overlay: 40;
  --layer-modal: 50;
}

.course-card { position: relative; }
.badge { position: absolute; z-index: var(--layer-card-badge); }
.overlay { position: fixed; inset: 0; z-index: var(--layer-overlay); }
.modal { position: fixed; z-index: var(--layer-modal); }

Проверка

Откройте страницу, нажмите кнопку: overlay должен затемнить весь экран, а modal — лечь поверх него. Бейдж остаётся виден на карточке. Если что-то не поднимается — проверьте position и контекст родителя в DevTools.

Ожидаемый результат

Так должна выглядеть карточка и открытое модальное окно поверх затемнения:

NEW

Курс HTML

Запись на курс

.badge   { z-index: var(--layer-card-badge); } /* 2 */
.overlay { z-index: var(--layer-overlay); }     /* 40 */
.modal   { z-index: var(--layer-modal); }       /* 50 */

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

⚡ Кратко