CSS position: что нужно знать до первого залипшего блока

К концу этой статьи вы поймёте, чем absolute отличается от fixed, почему top и left иногда вообще ничего не делают, и как заставить блок прилипнуть к верху экрана при прокрутке. На разбор уйдёт минут пятнадцать, все примеры можно вставить в любой HTML-файл и открыть в браузере. Актуально для всех современных браузеров — Chrome, Firefox, Safari; position: sticky работает везде начиная примерно с 2019 года.

Свойство position управляет тем, как элемент располагается в потоке документа и относительно чего считаются смещения top, right, bottom, left. У него пять значений: static, relative, absolute, fixed, sticky. Путаница между ними — причина большинства ситуаций «я написал top, а блок стоит на месте».

Что нужно понять до начала

Три вещи, без которых свойства смещения ведут себя необъяснимо:

• Смещения работают не всегда. top, left и остальные влияют на элемент только если у него position отличается от static. У static они игнорируются молча — ошибки в консоли не будет.
• Есть «содержащий блок» (containing block). Именно относительно его границ отсчитываются смещения. У absolute это ближайший предок с position не равным static; если такого нет — окно браузера.
• Поток документа. static, relative и sticky занимают место в потоке — соседние элементы их «видят». absolute и fixed из потока выпадают, будто их нет, и другие блоки могут наехать на их место.

Пять значений по порядку

static — значение по умолчанию

Так расположены все элементы, пока вы не написали иное. Блок стоит там, где ему положено по потоку. Смещения не действуют. Отдельно position: static пишут редко — разве что чтобы отменить заданное ранее значение.

relative — сдвиг от собственного места

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

<div class="box">Первый</div>
<div class="box shifted">Второй</div>
<div class="box">Третий</div>

<style>
.box { width: 120px; height: 60px; background: #dde; margin: 8px; }
.shifted {
  position: relative;
  top: 20px;   /* сдвиг вниз на 20px от исходной позиции */
  left: 30px;  /* сдвиг вправо на 30px */
}
</style>

Проверка: второй блок съедет вниз-вправо, но между первым и третьим останется пустое место — там, где второй «был бы». Чаще всего relative используют не ради смещения, а чтобы сделать элемент содержащим блоком для вложенного absolute.

absolute — привязка к предку

Элемент выпадает из потока и позиционируется относительно ближайшего предка, у которого position не static. Если такого предка нет — относительно корня страницы. Это самая частая причина багов: вы ждёте, что блок ляжет внутри карточки, а он улетает в угол экрана, потому что у карточки не задано position: relative.

<div class="card">
  <span class="badge">NEW</span>
  Текст карточки
</div>

<style>
.card {
  position: relative;   /* без этой строки badge улетит в угол окна */
  width: 200px;
  padding: 16px;
  background: #eee;
}
.badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: crimson;
  color: #fff;
  padding: 2px 6px;
}
</style>

Проверка: значок NEW прижмётся к правому верхнему углу серой карточки. Уберите position: relative у .card — значок прыгнет в угол всей страницы.

fixed — привязка к окну браузера

Похоже на absolute, но точка отсчёта — окно (viewport), а не предок. Блок остаётся на месте при прокрутке. Так делают «плавающие» кнопки, куки-баннеры, шапки, которые всегда видны.

.cookie-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;      /* растянуть по всей ширине окна */
  padding: 12px;
  background: #222;
  color: #fff;
}

Подводный камень: если у любого предка задано свойство transform, filter или perspective с ненулевым значением, точкой отсчёта для fixed становится этот предок, а не окно. Блок перестаёт «прилипать» к экрану, и это выглядит как поломка на пустом месте.

sticky — гибрид relative и fixed

Пока элемент в зоне видимости — ведёт себя как relative, стоит в потоке. Как только при прокрутке он достигает заданного порога (например, top: 0) — прилипает и ведёт себя как fixed, пока родитель не уедет за пределы экрана.

.section-title {
  position: sticky;
  top: 0;              /* обязателен хотя бы один порог, иначе не залипнет */
  background: #fff;
  padding: 8px;
}

Проверка: заголовок раздела прокручивается вместе со страницей, а дойдя до верха окна — замирает там, пока виден его раздел. Без указанного top (или другого порога) sticky не сработает вообще — это самая частая ошибка новичков.

Правило, которое экономит часы отладки: если смещение top/left не действует — сначала проверьте, задан ли элементу position, отличный от static. В девяти случаях из десяти проблема здесь.

Сравнение значений

z-index — кто окажется сверху

Когда позиционированные блоки накладываются, порядок наложения задаёт z-index. Важное ограничение: z-index действует только на элементы с position не равным static. Если написать z-index: 999 статичному блоку — ничего не изменится. Большее число — ближе к зрителю.

Отдельная тема — контексты наложения (stacking contexts): z-index сравнивается только внутри одного контекста, и transform или opacity у предка создают новый. Здесь мы её только обозначаем, разбор оставим отдельно.

Если не получилось

• Написал top: 20px, блок не двигается. У элемента position: static (по умолчанию). Задайте relative, absolute или fixed.
• Absolute-блок улетел в угол страницы. У ближайшего предка нет position: relative. Добавьте его тому контейнеру, внутри которого хотите позиционировать.
• Sticky не залипает. Не задан порог (top, bottom и т.п.), либо у родителя стоит overflow: hidden, либо высота родителя равна высоте самого элемента — прилипать некуда.
• Fixed прокручивается вместе со страницей. У одного из предков есть transform, filter или perspective — он перехватил роль точки отсчёта.
• z-index не помогает поднять блок наверх. Либо у элемента position: static, либо элементы в разных контекстах наложения — сравнивать их z-index напрямую нельзя.

Что делать дальше

Соберите одну страницу, где встречаются все пять значений: карточка с absolute-значком, залипающий sticky-заголовок, fixed-кнопка «наверх». На ней вы быстрее прочувствуете разницу, чем по любой таблице. Дальше стоит разобраться с контекстами наложения (stacking context) — без этого z-index в больших проектах остаётся непредсказуемым. И посмотрите на Flexbox и Grid: большую часть раскладок, ради которых раньше тянулись к position, сегодня удобнее делать именно ими, а position оставить точечным наложениям.