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

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

⚡ Кратко

Если раскладка выглядит странно: 1) у absolute-родителя забыт relative; 2) sticky без top или зажат overflow родителя; 3) fixed перекрыл контент.

Типичные ошибки

1. absolute без контекста позиционирования

Бейдж уезжает в угол всей страницы, потому что у родителя нет position: relative — absolute ищет ближайшего позиционированного предка и не находит его.

❌ Родитель без relative — бейдж уехал в угол контейнера, а не карточки:

Карточка (static)

NEW

/* ❌ забыли relative у .card */
.card  { /* position: static; */ }
.badge { position: absolute; top: 6px; right: 6px; }

/* ✅ правильно */
.card  { position: relative; }

2. relative вместо margin

Визуальный сдвиг через relative не меняет место элемента в потоке — рядом остаётся «дырка», соседи не смыкаются. Для сдвига в потоке используйте margin.

3. fixed перекрывает контент

Фиксированная панель/кнопка ложится поверх текста. Добавьте контенту отступ (padding-bottom) или проверьте расположение на мобильном экране.

4. sticky «не липнет»

Две главные причины: не задан порог top (или bottom), либо у одного из родителей стоит overflow: hidden/auto/scroll — это ломает прилипание.

Диагностика: если раскладка странная, в DevTools проверьте у элемента computed position, наличие top/left и у всех родителей — overflow.