Від'ємні значення при позиціонуванні в CSS

Вивчаємо використання від'ємних значень top, right, bottom і left для зміщення позиціонованих елементів.

Від'ємні значення при позиціонуванні в CSS

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

Додатнє значення переміщує елемент у вказаному напрямку, а від'ємне — у протилежному.

Звичайне позиціонування

Спочатку створимо батьківський блок із position: relative та дочірній блок із position: absolute.

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

#parent {
  position: relative;

  width: 300px;
  height: 300px;

  margin: 50px auto;
  border: 1px solid red;
}

#child {
  position: absolute;

  top: 0;
  left: 0;

  width: 100px;
  height: 100px;

  border: 1px solid green;
}

Використання від'ємних координат

Тепер змістимо блок за межі батьківського елемента за допомогою від'ємних значень.

#child {
  position: absolute;

  top: -20px;
  left: -30px;

  width: 100px;
  height: 100px;

  border: 1px solid green;
}

Як працюють від'ємні значення

top: -20px переміщує елемент вверх.
bottom: -20px переміщує елемент вниз.
left: -20px переміщує елемент вліво.
right: -20px переміщує елемент вправо.

Практичне використання

Від'ємні значення часто використовуються для створення елементів, які частково виходять за межі батьківського блока.

❗ Важливо:

Якщо елемент виходить за межі батька — це не помилка. У сучасному дизайні це дуже поширений прийом.

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

📌 Завдання:

№1. Створіть блок 300×300px з position: relative.
№2. Додайте дочірній блок 100×100px з position: absolute.
№3. Розмістіть його через top: 0 та left: 0.
№4. Спробуйте значення top: -20px та left: -30px.
№5. Подивіться, як блок виходить за межі батька.

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

Від'ємні координати не змінюють розмір елемента — вони тільки змінюють його положення.

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

#child {
  position: absolute;

  top: -20px;
  left: -30px;
}