Позиціонування відносно батьківського елемента в CSS

Вивчаємо, як position: relative у батьківського елемента змінює поведінку дочірнього елемента з position: absolute.

Позиціонування відносно батьківського елемента в CSS

Якщо батьківському елементу задати position: relative, а дочірньому position: absolute, то дочірній елемент буде позиціонуватися відносно свого батька.

Без position: relative у батька абсолютний елемент буде орієнтуватися відносно вікна браузера.

Зазвичай батьківському елементу задають position: relative без координат. У такому випадку його положення не змінюється, але він стає точкою відліку для дочірніх елементів.

Звичайний батьківський та дочірній елемент

Спочатку створимо два блоки без позиціонування.

<div id="parent">
  <div id="child"></div>
</div>

#parent {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}

#child {
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Absolute без position: relative у батька

Якщо дочірньому елементу задати position: absolute, але батько не має position: relative, елемент буде позиціонуватися відносно вікна браузера.

#child {
  position: absolute;
  top: 20px;
  left: 20px;

  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Absolute всередині relative

Додамо батьківському блоку position: relative. Тепер дочірній елемент буде рахувати координати відносно батька.

#parent {
  position: relative;

  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}

#child {
  position: absolute;
  top: 20px;
  left: 20px;

  width: 200px;
  height: 200px;
  border: 1px solid green;
}

position: relative у батька створює точку відліку.
position: absolute у дочірнього елемента дозволяє керувати його положенням.
top, left, right, bottom рахуються відносно найближчого батька з position.
Без relative абсолютний елемент орієнтується на сторінку.

❗ Важливо:

Ця схема використовується майже у всіх сучасних інтерфейсах: картки із бейджами, кнопки поверх зображень, модальні вікна та декоративні елементи.

Практичні завдання

📌 Завдання:

№1. Створіть батьківський блок розміром 500×300px.
№2. Додайте всередину дочірній блок.
№3. Задайте дочірньому блоку position: absolute.
№4. Додайте батьку position: relative та порівняйте результат.

💡 Показати підказку

Запам'ятайте правило: relative ставиться батьку, absolute — елементу, який потрібно пересунути.

✅ Показати відповідь

#parent {
  position: relative;
}

#child {
  position: absolute;
  top: 20px;
  left: 20px;
}