Абсолютное позиционирование и содержащий блок

Абсолютно позиционированный элемент удаляется из обычного потока документа. Другие элементы ведут себя так, будто его не существует. Его положение определяется относительно ближайшего позиционированного предка.

Содержащим блоком абсолютно позиционированного элемента является ближайший предок со значением position, отличным от static. Если такого предка нет, положение элемента определяется относительно исходного содержащего блока (области просмотра).

Самый распространённый шаблон: добавьте position: relative родительскому элементу, чтобы он содержал абсолютно позиционированные дочерние элементы.

При абсолютном позиционировании расстояния top/right/bottom/left отсчитываются от внутреннего края содержащего блока.

Классический способ центрирования абсолютно позиционированных элементов:

Абсолютно позиционированные элементы по умолчанию подстраиваются под размер содержимого (если не заданы width и height). В отличие от блочных элементов, они больше не растягиваются на всю ширину контейнера.

Установка всех четырёх краёв в 0 растягивает абсолютно позиционированный элемент на весь содержащий блок:

Свойство inset является сокращённой записью для одновременной установки top, right, bottom и left:

Абсолютно позиционированные элементы участвуют в контекстах наложения. Используйте z-index, чтобы управлять тем, какие перекрывающиеся абсолютные элементы отображаются поверх других.

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

Flex- или Grid-контейнер автоматически не становится позиционированным элементом. Вам всё равно нужно явно добавить position: relative, чтобы сделать его содержащим блоком для абсолютных дочерних элементов.

Где будет размещён абсолютно позиционированный элемент, если ни у одного из его предков нет значения position, отличного от static?

Абсолютно позиционированные элементы покидают поток документа и позиционируются относительно ближайшего предка, не имеющего значения static. Всегда добавляйте position: relative родительскому элементу, чтобы управлять размещением. Используйте inset: 0, чтобы растянуть абсолютный элемент на весь контейнер.