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

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

⚡ Кратко

Собрать страницу профиля: absolute-бейдж статуса, sticky-подзаголовок и fixed-кнопку. В комментариях подписать, кто в потоке, а кто вне его.

Что сделать

  1. Соберите карточку профиля с абсолютным бейджем статуса (например, зелёная точка «онлайн») — родителю задайте position: relative.
  2. Добавьте sticky-подзаголовок внутри длинного текста (position: sticky; top: 0).
  3. Добавьте fixed-кнопку «Наверх» в правый нижний угол окна.
  4. Подпишите в комментариях CSS, какие элементы участвуют в потоке, а какие выпали.

Ориентир по результату

Карточка профиля с absolute-бейджем должна выглядеть примерно так:

Анна
онлайн
.avatar { position: relative; }   /* контекст */
.status {
  position: absolute;   /* вне потока */
  right: -2px;
  bottom: -2px;
}

Подготовка окружения

  • Создайте папку проекта и файлы index.html и styles.css.
  • Откройте папку в VS Code; для живого обновления используйте расширение Live Server (правый клик → «Open with Live Server») либо просто откройте index.html двойным кликом.

Критерии сдачи

  • Страница открывается локально.
  • CSS вынесен в отдельный файл styles.css (или отдельный блок примера).
  • Поведение проверено через DevTools (F12): у absolute-элемента есть relative-родитель, у sticky задан top.