Позиционирование: relative, absolute, fixed, sticky, z-index

Закрепляй бейджи, шапки и модальные окна ровно там, где нужно, с помощью позиционирования CSS и продуманной шкалы z-index.

8 мин · 3 вопросов

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

.product-card {
  position: relative;
}

.promo-badge {
  position: absolute;
  top: 12px;
  right: 12px;
}

position: fixed прикалывает элемент к области просмотра независимо от прокрутки: баннер о куках, кнопка «наверх». position: sticky - гибрид: элемент прокручивается вместе со страницей как обычно, а затем фиксируется на месте, дойдя до порога, который ты задаёшь (например top: 0). Это современное решение для шапок, которые остаются на виду.

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
}

Когда элементы накладываются друг на друга, z-index решает, кто окажется сверху, - но только для позиционированных элементов. Заведи задокументированную шкалу вместо случайных значений: 10 для выпадающих меню, 100 для шапки, 1000 для модальных окон. Осторожно: родитель, создающий собственный контекст наложения (например, с opacity меньше 1), ограничивает z-index всех своих потомков.

.dropdown {
  z-index: 10;
}

.site-header {
  z-index: 100;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

Проверка знаний

Убедись, что запомнил ключевые моменты этого урока.

1. Относительно чего позиционируется элемент с position: absolute?
   • Всегда относительно окна браузера
   • Относительно ближайшего позиционированного предка, иначе - области просмотра
   • Относительно прямого родителя, каким бы ни было его позиционирование
2. В чём разница между fixed и sticky?
   • fixed всегда приколот к экрану, а sticky фиксируется только начиная с порога прокрутки
   • sticky отрисовывается быстрее, чем fixed
   • Никакой, это синонимы
3. Почему z-index: 999 может не сработать?
   • Потому что максимально допустимое значение - 100
   • Потому что элемент не позиционирован или заперт в контексте наложения ниже уровнем
   • Потому что z-index работает только с Grid