Как работают позиции (position) в CSS: static, relative, absolute, fixed, sticky?

Основы позиционирования в CSS

Свойство position управляет тем, как элемент размещается на странице. По умолчанию все элементы имеют position: static и следуют нормальному потоку документа. Изменение position на другое значение позволяет вырвать элемент из потока или изменить его точку привязки.

Типы позиций

• static — стандартное поведение. Элемент располагается в порядке следования в HTML. Свойства top, left, right, bottom не работают.
• relative — элемент остаётся в потоке, но его можно сместить относительно исходного места. Соседние элементы не реагируют на смещение.
• absolute — элемент удаляется из потока и позиционируется относительно ближайшего предка с position не static (или body, если такого нет). Задаётся через top/left/right/bottom.
• fixed — элемент фиксируется относительно окна браузера, не двигается при скролле. Часто используется для шапок или кнопок.
• sticky — комбинация relative и fixed. Элемент ведёт себя как relative, пока не достигнет заданного порога (например, top: 0), после чего прилипает к экрану как fixed.

Пример кода

<div class="container">
  <div class="box relative">Relative</div>
  <div class="box absolute">Absolute</div>
  <div class="box fixed">Fixed</div>
  <div class="box sticky">Sticky</div>
</div>

<style>
  .container { position: relative; height: 200vh; }
  .box { width: 100px; height: 100px; }
  .relative { position: relative; top: 20px; left: 20px; }
  .absolute { position: absolute; top: 50px; right: 0; }
  .fixed { position: fixed; bottom: 10px; right: 10px; }
  .sticky { position: sticky; top: 0; }
</style>

Вывод

Понимание position необходимо для создания сложных макетов, модальных окон, тулбаров и адаптивных интерфейсов. Выбор типа зависит от задачи: для выпадающих меню — absolute, для шапки — fixed, для секций с прилипанием — sticky.