Урок 18. Решения: Позиционирование: static, relative, absolute, fixed, sticky

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

⚡ Кратко

Решение считается понятным, если вы можете объяснить причину каждого свойства: зачем родителю relative, почему sticky нужен top и т.д.

Разбор решений

Задания 1–2. Бейдж в углу карточки

Родителю задаём position: relative (контекст), бейджу — position: absolute с top/right. Бейдж выпадает из потока и прибивается к углу карточки.

NEW Карточка товара 
.card  { position: relative; }
.badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

Задание 4. Липкий заголовок

Без top sticky не активируется. Заголовок едет с потоком, пока не упрётся в top: 0, затем прилипает в границах своей секции.

Заголовок (sticky)
Строка 1
Строка 2
Строка 3 — прокрути
Строка 4
Строка 5
.section-title {
  position: sticky;
  top: 0;     /* обязательный порог */
}

Проверочные ответы (анализ потока)

  1. absolute-потомок ищет ближайшего предка не со static — поэтому родителю задают relative.
  2. fixed удобен для элементов интерфейса, но может перекрывать контент — оставляйте отступ.
  3. sticky требует заданного top и работает только в границах родительского контейнера.
  4. Если нужно просто расстояние между блоками — position не нужен, берите margin/gap.