.card { position: relative; } .badge { position: absolute; top: 12px; right: 12px; }Метка позиционируется относительно карточки, а не всей страницы.
УРОК 50 ИЗ 100
Расположите метку внутри карточки
Закрепите метку в правом верхнем углу карточки.
ШАГ 1 · ИЗУЧИТЕ
Как это работает
Относительно позиционированная карточка задаёт опорный блок. Абсолютная метка выходит из обычного потока, а top и right задают расстояние до краёв карточки.
.card { position: static; } .badge { position: absolute; top: 12px; right: 12px; }Без позиционированного предка метка может использовать другой опорный блок и визуально покинуть карточку.
ШАГ 2 · ПРИМЕНИТЕ
Ваше задание
Задайте позиционирование карточки и метки, затем top и right по 12px.
index.htmlCSS
Безопасный результатизолировано
Черновик хранится только в этом браузере.HTML и CSS разрешены · скрипты и сеть заблокированы
ШАГ 4 · ПРОВЕРЬТЕ
Что должно пройти
0%не проверено
- ○Карточка является относительным ориентиром.
- ○Метка использует абсолютное позиционирование.
- ○Метка находится в 12px сверху.
- ○Метка находится в 12px справа.
- ○Метка является потомком карточки.
Объясните логику решения
Связь относительный родитель → абсолютный потомок сохраняет координаты внутри компонента.