Какие свойства позиционируют и не влияют на поток?
Продвинутые темы
Позиционируют и не влияют на поток (вынимают из потока): `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 визуально сдвигает, но место сохраняет.