CSS position

position меняет способ размещения элемента. Само свойство выбирает режим, а top, right, bottom, left или inset задают смещение. Без position эти смещения не работают.

Пять значений

Если position не указано, элемент ведёт себя как static.

relative: сдвинуть, сохранив место

position: relative оставляет исходное место за элементом. Соседи раскладываются так, будто он не двигался; смещается только его отрисовка.

.item {
  position: relative;
  top: 28px;
  left: 32px;
}

В тренажёре по умолчанию выбрано static: смещения заданы, но не действуют. Переключите режим и сравните.

.item {  position: static;  top: 28px;  left: 32px;}

Часто relative нужен не для сдвига, а чтобы задать точку отсчёта для дочернего absolute.

absolute: привязать к предку

Абсолютный элемент не занимает места в обычном потоке. Для начала считайте ориентиром ближайшего предка, у которого position не равен static, например relative. Если такого предка нет, ориентиром становится начальный containing block страницы.

<article class="card">
  <img src="headphones.jpg" alt="Наушники" />
  <span class="badge">−20%</span>
</article>

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

Включите и выключите position: relative у карточки, затем переключайте ширину и высоту макета. С relative метка следует за карточкой. Без него она привязывается к рамке макета – ближайшему позиционированному предку в этой демонстрации – и отрывается от карточки при изменении её размера и положения.

Для absolute нужен позиционированный предок, если элемент должен держаться относительно карточки. В примере это .card { position: relative; }. Размеры в тренажёре имитируют разные viewport браузера; они не меняют окно сайта.

Смещения: стороны и inset

top, right, bottom, left задают расстояние от соответствующей стороны ориентирующего блока. inset – сокращённая запись для этих четырёх сторон:

.badge {
  inset: 8px 12px 16px 20px;
}

inset повторяет порядок margin: сверху по часовой стрелке – верх, право, низ, лево.

Запись с тремя значениями встречается редко: последнее значение относится к низу, а левое расстояние незаметно повторяет правое. Чаще понятнее написать два или четыре значения.

Поменяйте число значений – виджет покажет итоговые отступы и размер абсолютного элемента:

position: absolute;
inset: 16px;

Например, inset: 0 прижимает элемент ко всем четырём сторонам. Если ширина и высота оставлены auto, он растягивается на доступную область.

Смещение не меняет исходный размер и место relative-элемента в потоке. У absolute оно размещает элемент относительно найденного ориентира.

z-index: кто сверху

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

.menu {
  position: relative;
  z-index: 2;
}
 
.dialog-backdrop {
  position: fixed;
  z-index: 1;
}

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

fixed и sticky

fixed подходит для постоянно закреплённой кнопки или панели. Обычно её координаты считаются от окна браузера, и она не прокручивается вместе с документом.

Переключите режим и прокрутите область. Тренажёр показывает окно браузера отдельной рамкой.

.help {
  position: static;
}

sticky сохраняет место в потоке. При прокрутке элемент движется как обычно, пока не достигнет заданной границы, например top: 0:

.section-title {
  position: sticky;
  top: 0;
}

Для прилипания обязательно задайте хотя бы одно смещение (top, right, bottom или left). Оно действует в пределах прокручиваемого предка; overflow у предков может изменить ожидаемую область прокрутки.

Как выбрать

• Обычное содержимое – static.
• Небольшой сдвиг с сохранением места – relative.
• Метка или значок внутри карточки – родителю relative, метке absolute.
• Постоянная кнопка у края окна – fixed.
• Заголовок, который прилипает при прокрутке секции – sticky.

Сначала стройте обычный поток и Flexbox/Grid. position используйте для наложения и точечных смещений, а не вместо раскладки. Дальше – Flexbox.