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

Рабочие примеры

Сверху каждого примера — живой результат, рядом код. Идём от простого к сложному.

1. relative — сдвиг от исходного места

Жёлтый блок сдвинут на top: 16px; left: 24px, но его «место» в потоке сохранилось — третий блок не подвинулся вверх.

.block-2 {
  position: relative;
  top: 16px;
  left: 24px;   /* сдвиг от исходного места */
}
/* поток не меняется: Блок 3 остаётся на месте */

2. absolute — привязка к relative-родителю

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

.card {
  position: relative;   /* контекст для бейджа */
  padding: 24px;
}
.badge {
  position: absolute;   /* выпал из потока */
  top: 8px;
  right: 8px;
}

3. absolute — оверлей поверх содержимого

absolute-элемент можно растянуть на весь родитель через inset: 0 (= top/right/bottom/left: 0). Удобно для затемнений и подписей поверх картинок.

.photo { position: relative; }
.caption {
  position: absolute;
  inset: 0;             /* top/right/bottom/left: 0 */
  display: flex;
  align-items: flex-end;
}

4. fixed — плавающая кнопка «Наверх»

Настоящий position: fixed привязал бы кнопку к окну браузера и вырвал бы её из карточки-превью. Поэтому здесь поведение имитируется внутри рамки: кнопка прижата к нижнему правому углу контейнера, как была бы прижата к углу экрана.

/* в реальном коде — относительно окна браузера */
.to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
}

5. sticky — липкая шапка при прокрутке

Прокрути список внутри рамки: заголовок «прилипает» к верху контейнера и остаётся видимым.

.section-title {
  position: sticky;
  top: 0;               /* порог прилипания обязателен */
  background: #0f766e;
  color: #fff;
}