Относительно чего позиционируется абсолютно позиционированный элемент?

Как работает абсолютное позиционирование

Абсолютно позиционированный элемент (position: absolute) полностью удаляется из нормального потока документа и позиционируется относительно своего ближайшего позиционированного предка. Позиционированным считается предок, у которого свойство position установлено в relative, absolute, fixed или sticky (любое значение, кроме static).

Поиск контекста позиционирования

Если у элемента нет ни одного предка с явно заданным позиционированием, он будет позиционироваться относительно начального содержащего блока. В веб-браузерах этим блоком обычно является окно просмотра (viewport), но формально это корневой элемент html.

Пример кода

<div style="position: relative; width: 300px; height: 200px;">
  <div style="position: absolute; top: 20px; left: 30px;">
    Я позиционирован относительно родителя
  </div>
</div>

В этом примере внутренний div с position: absolute будет расположен на 20px сверху и 30px слева от границ внешнего div, так как внешний div имеет position: relative.

Вывод

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