Что происходит с потоком документа при использовании position absolute в CSS
Что проверяют
Понимаете ли вы, что элемент не просто смещается, а выходит из потока, и знаете ли, относительно чего он считает координаты. Второй вопрос отсекает тех, кто расставляет position: relative наугад.
Как отвечать
Элемент с position: absolute перестаёт участвовать в потоке: место под него не резервируется, соседи смыкаются, высота родителя его не учитывает, внешние отступы с соседними не схлопываются. Его отображение приводится к блочному, и без заданной ширины он сжимается по содержимому, а не растягивается на родителя.
Координаты считаются от блока-контейнера. Это ближайший предок, у которого:
- позиция отличается от
static, либо - задан
transform,filter,perspective,containили объявленwill-changeна этих свойствах.
Если подходящего предка нет, отсчёт идёт от начального блока-контейнера, то есть от документа, а не от окна: при прокрутке такой элемент уезжает вместе со страницей, в отличие от fixed. Если смещения не заданы вовсе, элемент остаётся на своём обычном месте, но уже вне потока.
Про отрисовку добавьте, что позиционированные элементы рисуются поверх обычного содержимого и без z-index, а z-index со значением, отличным от auto, создаёт контекст наложения.
Где спотыкаются
Забывают position: relative у родителя и получают элемент, приклеенный к углу страницы. Обратная сторона той же невнимательности: transform у далёкого предка создаёт контейнер и для fixed, и элемент, который должен висеть над страницей, начинает прокручиваться внутри блока.
Удивляются, что контейнер схлопнулся в нулевую высоту. Абсолютный потомок высоты ему не даёт вообще, поэтому либо высоту задают явно, либо оставляют в потоке хотя бы один элемент нужного размера, а из потока выводят только оформление.
Наращивают z-index вместо того, чтобы разобраться с контекстами наложения. Значение сравнивается только внутри своего контекста, и элемент с огромным числом останется под соседом, чей предок создал контекст прозрачностью меньше единицы, трансформацией или фильтром.