При каких значениях свойства Position элемент выпадает из потока

Position и выпадение из потока

CSS свойство position определяет, как элемент позиционируется на странице. Не все значения вызывают выпадение элемента из потока (document flow).

Значения Position

static (по умолчанию) — в потоке

.element {
  position: static;
  /* Находится в обычном потоке
     Свойства top, right, bottom, left не работают */
}

Элемент остается в документообороте, занимает свое место, не подвергается смещению.

relative — в потоке

.element {
  position: relative;
  top: 20px;
  left: 10px;
  /* Находится в потоке, но может быть смещен
     Остальные элементы не "понимают" это смещение */
}

Элемент остается в потоке, но может смещаться относительно своего исходного положения.

absolute — ВЫПАДАЕТ ИЗ ПОТОКА

.element {
  position: absolute;
  top: 50px;
  left: 100px;
  /* Выпадает из потока document flow
     Позиционируется относительно ближайшего positioned-предка */
}

Выпадает из потока! Элемент удаляется из документооборота, другие элементы на его месте "схлопываются".

fixed — ВЫПАДАЕТ ИЗ ПОТОКА

.element {
  position: fixed;
  top: 20px;
  right: 20px;
  /* Выпадает из потока
     Позиционируется относительно viewport
     Остается на месте при скролле */
}

Выпадает из потока! Элемент удаляется из документооборота и позиционируется относительно viewport.

sticky — условно в потоке

.element {
  position: sticky;
  top: 0;
  /* Находится в потоке, но "прилипает" при скролле
     Не выпадает из потока в классическом смысле */
}

Находится в потоке, но может менять поведение при скролле.

Визуальный пример

<div class="container">
  <div class="static">Static — в потоке</div>
  <div class="relative">Relative — в потоке (смещен)</div>
  <div class="absolute">Absolute — вне потока</div>
  <div class="fixed">Fixed — вне потока</div>
</div>

.container {
  height: 100vh;
  position: relative; /* контекст позиционирования */
}

.static {
  position: static;
  background: blue; /* займет свое место в потоке */
}

.relative {
  position: relative;
  top: 20px;
  background: green; /* в потоке, но смещен */
}

.absolute {
  position: absolute;
  top: 50px;
  background: red; /* вне потока! */
}

.fixed {
  position: fixed;
  top: 0;
  right: 0;
  background: yellow; /* вне потока, относительно окна */
}

Таблица Summary

Практические примеры

Выпадающее меню (absolute)

.menu {
  position: absolute;
  top: 100%;
  left: 0;
  /* Не влияет на соседние элементы */
}

Fixed header

.header {
  position: fixed;
  top: 0;
  width: 100%;
  /* Остается видимым при скролле */
}

Sticky заголовок в таблице

thead {
  position: sticky;
  top: 0;
  /* Остается в потоке, но прилипает */
}

Ключевые выводы

ВЫПАДАЮТ ИЗ ПОТОКА:

• absolute — позиционируется относительно positioned-предка
• fixed — позиционируется относительно viewport

ОСТАЮТСЯ В ПОТОКЕ:

• static — по умолчанию, не сдвигается
• relative — может смещаться, но место остается
• sticky — гибридный вариант

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