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

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

⚡ Кратко

position смещает элемент относительно его места, контейнера, окна или границы прокрутки. Ключевой вопрос — остался ли элемент в потоке. static и relative — в потоке, absolute и fixed — выпадают, sticky — гибрид.

О чём этот урок

position позволяет смещать элементы относительно обычного места, контейнера, окна браузера или границы прокрутки. Важно понимать, когда элемент остаётся в потоке, а когда выходит из него.

Разберём все пять значений на живых примерах: static (по умолчанию, в потоке), relative (сдвиг с сохранением места), absolute (привязка к relative-родителю), fixed (привязка к окну), sticky (липкий при прокрутке).

static relative absolute fixed sticky в потоке вне потока гибрид
Пять значений position и их отношение к потоку документа.

Структура урока

Теория

Разбор темы и базовых правил.

Справочник

Справочник свойств и конструкций.

Примеры

Рабочие примеры с CSS-кодом.

Старый vs Новый

Сравнение слабого и поддерживаемого подхода.

Задания

Практика для самостоятельной работы.

Решения

Проверочные ответы и критерии.

Ошибки

Типичные ошибки и диагностика.

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

Домашняя работа для закрепления.

Ресурсы

Документация и справочные ссылки.

Практика

  • Создайте карточку с position: relative.
  • Разместите бейдж внутри карточки через position: absolute.
  • Сделайте фиксированную кнопку «Наверх».

Навигация