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

Как работает позиционирование без позиционированных предков

Абсолютно позиционированный элемент (position: absolute) вырывается из обычного потока документа и позиционируется относительно своего содержащего блока (containing block). Содержащий блок определяется ближайшим предком, у которого свойство position задано как relative, absolute, fixed или sticky. Если такого предка нет, то используется начальный содержащий блок (initial containing block), который формируется корневым элементом документа (html) и обычно совпадает с областью просмотра (viewport) браузера.

Важно понимать: начальный содержащий блок не равен всему документу. Если страница прокручивается, элемент будет позиционироваться относительно видимой области окна, а не относительно всей высоты документа. Это часто приводит к неожиданным результатам, когда элемент «прилипает» к верхней части экрана при прокрутке, хотя ожидалось, что он останется на месте в документе.

Практический пример

<div style="position: absolute; top: 20px; left: 30px;">
  Я позиционируюсь относительно viewport
</div>

<div style="position: relative;">
  <div style="position: absolute; top: 10px; left: 10px;">
    Я позиционируюсь относительно родителя
  </div>
</div>

В первом случае элемент будет находиться на расстоянии 20px сверху и 30px слева от верхнего левого угла окна браузера. Во втором случае — на расстоянии 10px от верхнего левого угла родительского блока (который имеет position: relative).

Когда это важно

Понимание этого поведения критично при создании модальных окон, всплывающих подсказок, выпадающих меню и других элементов интерфейса, которые должны быть привязаны к определённой части страницы. Если забыть задать position: relative родителю, элемент может «улететь» в угол экрана или вести себя непредсказуемо при прокрутке.

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