position

Значения

Параметр	Тип	Описание
static	keyword	В обычном потоке; смещения не работают (по умолчанию).
relative	keyword	Сдвигается от своего обычного места, которое остаётся занятым; ещё и точка отсчёта для абсолютных детей.
absolute	keyword	Выпадает из потока и размещается относительно ближайшего позиционированного предка.
fixed	keyword	Размещается относительно окна и не прокручивается вместе со страницей.
sticky	keyword	Прокручивается со страницей, пока не дойдёт до заданного смещения, затем прилипает.

Примеры

Значок в углу карточки — absolute внутри relative:

<style>
  .card { position: relative; width: 200px; padding: 16px; background: whitesmoke; }
  .badge { position: absolute; top: 8px; right: 8px; background: crimson; color: white; padding: 2px 6px; }
</style>
 
<div class="card">Product card <span class="badge">New</span></div>

Липкий заголовок:

<div style="height: 120px; overflow: auto; border: 1px solid gray;">
  <h4 style="position: sticky; top: 0; margin: 0; background: gold;">Sticky header</h4>
  <p>Scroll this box.</p><p>The header stays at the top.</p><p>More text.</p><p>And more.</p>
</div>

Примечания

Абсолютно позиционированный элемент ищет ближайшего предка с любым position, кроме static; если такого нет, он размещается относительно страницы. sticky нужно смещение вроде top: 0, и он не работает, если у предка overflow: hidden.

См. также

top, right, bottom, left — Смещения позиционированного элемента от краёв области отсчёта: сверху, справа, снизу и слева.
z-index — Какой из позиционированных элементов рисуется сверху, когда они перекрываются.
margin-inline — Логические свойства: размеры и отступы по направлению текста вместо «слева», «справа», «сверху», «снизу».
anchor-name — Делает элемент якорем с именем, чтобы абсолютно позиционированный элемент из любого места страницы можно было поставить рядом с ним.

В учебнике

Позиционирование — Свойство position — static, relative, absolute, fixed и sticky, координаты top, right, bottom, left и inset.

Спасибо, что читаете!

Синтаксис