PassFront
  1. PassFront
  2. База знаний
  3. Продвинутые темы

Какие свойства позиционируют и не влияют на поток?

Продвинутые темы

Позиционируют и не влияют на поток (вынимают из потока): `position: absolute` и `position: fixed`. Они убирают элемент из нормального потока — соседи ведут себя, будто его нет.

Свойства, вынимающие из потока

position: absolute

Элемент вынут из потока, позиционируется относительно ближайшего позиционированного предка:

.el { position: absolute; top: 0; right: 0; }

Соседние элементы располагаются, игнорируя его (место не занимает).

position: fixed

Вынут из потока, позиционируется относительно viewport (не двигается при скролле):

.el { position: fixed; top: 0; }

Свойства, которые НЕ вынимают из потока

  • position: relative — остаётся в потоке (место сохраняется), смещается относительно себя.
  • position: sticky — участвует в потоке (гибрид relative/fixed).
  • position: static — обычный поток.

Также вынимает из потока

  • float — частично вынимает (элемент обтекается, но влияет на inline-контент).

Практика

  • Оверлеи, тултипы, модалки, бейджи → absolute/fixed (не сдвигают контент).
  • transform: translate не вынимает из потока — визуально сдвигает, но место сохраняется.

Коротко для собеседования

Из потока вынимают (позиционируют без влияния на соседей) position: absolute (относительно позиционированного предка) и position: fixed (относительно viewport) — место не занимают. relative/sticky/static остаются в потоке. float вынимает частично. Для оверлеев/модалок — absolute/fixed; transform визуально сдвигает, но место сохраняет.

Другие вопросы раздела