Позиционирование и z-index

Учимся точно размещать элементы поверх потока: фиксировать, прилеплять и накладывать слоями.

position определяет, как элемент позиционируется относительно потока документа, а свойства top/right/bottom/left сдвигают его.

static — обычный поток

Значение по умолчанию. Элемент стоит в потоке там, где он в разметке. Свойства top/left на него не действуют. Большинство элементов остаётся именно такими.

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

Элемент остаётся в потоке (его прежнее место сохраняется), но его можно сдвинуть относительно исходной позиции через top/left.

.badge {
  position: relative;
  top: -5px;
  left: 10px;
}

Элемент сместится на 5px вверх и 10px вправо от того места, где стоял бы. Но у relative есть и вторая, более важная роль: он создаёт точку отсчёта для absolute-потомков (об этом ниже).

absolute — вырвать из потока

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

.card {
  position: relative; /* точка отсчёта для потомка */
}

.card .label {
  position: absolute;
  top: 8px;
  right: 8px;
}

Это классический рецепт: метка «New» в правом верхнем углу карточки. Родителю дают relative, метке — absolute с привязкой к углу. Запомните связку relative-родитель + absolute-потомок — она встречается постоянно.

fixed — прилипнуть к экрану

Элемент позиционируется относительно окна браузера и не двигается при прокрутке — остаётся на месте на экране.

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

Шапка приклеится к верху экрана и будет видна, сколько бы вы ни листали страницу. Так делают «липкие» меню и кнопки «наверх».

sticky — гибрид relative и fixed

Элемент ведёт себя как обычный (relative), пока при прокрутке не дойдёт до заданной границы — тогда «прилипает» (как fixed) и едет дальше вместе с экраном.

.toolbar {
  position: sticky;
  top: 0;
}

Панель прокручивается вместе со страницей, а доехав до верха окна, прилипает к нему. Отлично подходит для заголовков разделов и панелей фильтров.

z-index — кто поверх кого

Когда позиционированные элементы накладываются, z-index решает порядок слоёв: больше число — ближе к зрителю (выше).

.modal {
  position: fixed;
  z-index: 100; /* поверх всего */
}

.overlay {
  position: fixed;
  z-index: 99;  /* затемнение под модалкой */
}

Модальное окно с z-index: 100 ляжет поверх затемнения с z-index: 99. Важно: z-index работает только у позиционированных элементов (не static).

Памятка

Итог

• absolute вырывает элемент из потока; точку отсчёта задаёт предок с relative.
• fixed прилипает к окну, sticky — прилипает при прокрутке до границы.
• z-index управляет слоями у позиционированных элементов: больше число — выше.