Как position absolute влияет на соседние элементы в CSS

Что проверяют

Понимаете ли вы, что такое поток документа и относительно чего считается позиционирование. Это база вёрстки, на которой строятся выпадающие меню и подсказки.

Как отвечать

Элемент с position: absolute выходит из потока. Для соседей он перестаёт существовать: они располагаются так, будто его нет, и его размеры не влияют ни на высоту контейнера, ни на положение следующих блоков. Именно поэтому контейнер, внутри которого только абсолютные элементы, схлопывается в нулевую высоту.

Второй вопрос, всегда идущий следом: относительно чего он позиционируется. Точкой отсчёта становится ближайший предок, у которого position отличается от static. Если такого нет, отсчёт идёт от начального содержащего блока, то есть фактически от страницы. Отсюда привычная пара: родителю ставят position: relative, ребёнку absolute.

Что стоит добавить:

• не только position создаёт систему отсчёта: transform, filter, will-change, backdrop-filter и contain тоже делают элемент содержащим блоком, причём даже для position: fixed. Это частая причина того, что фиксированный элемент внезапно ведёт себя как абсолютный;
• внешние отступы соседей не схлопываются с абсолютным элементом, потому что он вне потока;
• размеры: без указания сторон элемент занимает место по содержимому в той точке, где он был бы в потоке; при указании противоположных сторон (left и right) он растягивается;
• наложение регулируется z-index, и он работает только у позиционированных элементов, а внутри контекстов наложения сравнение идёт независимо.

Где спотыкаются

Забывают position: relative у родителя и получают элемент, улетевший в угол страницы.

Пытаются задать высоту контейнеру, внутри которого только абсолютные дети.

Ставят transform на предка ради анимации и ломают позиционирование фиксированных элементов внутри.