Відносне позиціонування елементів у CSS

Вивчаємо position: relative, зміщення елементів за допомогою top, right, bottom та left, а також різницю між relative та normal flow.

Відносне позиціонування елементів у CSS

Відносне позиціонування задається за допомогою значення relative властивості position.

Таке позиціонування дозволяє зміщувати елемент відносно його початкового положення.

На відміну від абсолютного позиціонування, елемент не випадає з нормального потоку документа. Інші елементи продовжують вважати, що він знаходиться на своєму старому місці.

Властивість position: relative

Щоб увімкнути відносне позиціонування, потрібно додати position: relative.

.element {
  position: relative;
}

Зміщення елемента

Для зміщення використовуються властивості top, right, bottom та left.

top — зміщення зверху вниз або знизу вгору при від'ємному значенні.
bottom — зміщення знизу вгору або вниз при від'ємному значенні.
left — зміщення вправо або вліво при від'ємному значенні.
right — зміщення вліво або вправо при від'ємному значенні.

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

#elem1 {
  position: relative;

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

#elem1 {
  position: relative;
  top: 30px;

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

#elem1 {
  position: relative;
  top: 30px;
  left: 40px;

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

Від'ємні значення координат

Якщо використовувати від'ємні значення top, right, bottom або left, елемент буде зміщуватися у протилежний бік.

#elem2 {
  position: relative;
  top: -40px;
  left: 20px;

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

❗ Важливо:

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

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

📌 Завдання:

№1. Створіть три блоки різного кольору.
№2. Додайте другому блоку position: relative.
№3. Змістіть блок за допомогою top та left.
№4. Спробуйте використати від'ємні значення.

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

Пам'ятайте: relative змінює тільки візуальне положення елемента, але місце в документі залишається зайнятим.

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

.element {
  position: relative;
  top: 30px;
  left: 40px;
}