Что нужно указать у родительского элемента, чтобы дочерний элемент с position: absolute позиционировался относительно него?

Как работает позиционирование absolute

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

Что нужно указать у родителя

Достаточно задать родителю position: relative. Это не изменит его положение на странице, но сделает его точкой отсчёта для дочернего absolute-элемента. Также можно использовать position: absolute или fixed для родителя, но это повлияет на его собственное поведение.

Пример кода

<div class="parent">
  <div class="child">Я позиционирован относительно родителя</div>
</div>

<style>
.parent {
  position: relative; /* ключевое свойство */
  width: 300px;
  height: 200px;
  background: lightgray;
}
.child {
  position: absolute;
  top: 20px;
  left: 30px;
  background: coral;
}
</style>

В этом примере дочерний блок будет смещён на 20px сверху и 30px слева от границ родителя.

Вывод

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