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

Практические задания

Делайте по порядку — от простого к сложному. Рядом указан ожидаемый визуальный результат.

Задание 1. Карточка-контекст (relative)

Создайте карточку с position: relative — внешне она не меняется, но станет точкой отсчёта для бейджа из задания 2.

Задание 2. Бейдж в углу (absolute)

Разместите бейдж «NEW» внутри карточки через position: absolute в правом верхнем углу. Ожидаемый результат:

<div class="card">
  <span class="badge">NEW</span>
  Карточка товара
</div>

Задание 3. Кнопка «Наверх» (fixed)

Сделайте круглую кнопку в правом нижнем углу окна через position: fixed; right: 16px; bottom: 16px. Прокрутите страницу — кнопка не должна уезжать.

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

Сделайте заголовок секции position: sticky; top: 0. При прокрутке он должен прилипать к верху, пока его секция на экране.

Задание 5. Анализ потока

Для каждого элемента из заданий 1–4 запишите: остался он в потоке или вышел, и относительно чего позиционируется.