Абсолютне позиціонування елементів у CSS

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

Абсолютне позиціонування елементів у CSS

Абсолютне позиціонування дозволяє розташувати елемент у будь-якому місці сторінки за допомогою заданих координат.

Такий елемент випадає з нормального потоку документа. Інші елементи поводяться так, ніби цього елемента немає.

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

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

Щоб зробити елемент абсолютно позиціонованим, потрібно задати властивість position зі значенням absolute.

.element {
  position: absolute;
}

Координати елемента

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

top — відстань від верхнього краю.
bottom — відстань від нижнього краю.
left — відстань від лівого краю.
right — відстань від правого краю.

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

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

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

#elem2 {
  position: absolute;
  top: 150px;
  left: 100px;

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

#elem2 {
  position: absolute;
  top: 0;
  left: 0;
}

#elem2 {
  position: absolute;
  top: 0;
  right: 0;
}

#elem2 {
  position: absolute;
  bottom: 0;
  right: 0;
}

❗ Важливо:

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

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

📌 Завдання:

№1. Створіть два блоки та розмістіть другий блок за допомогою position: absolute.
№2. Встановіть блок у верхній лівий, верхній правий, нижній лівий та нижній правий кути.
№3. Спробуйте змінити значення top, left, right та bottom.

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

Для абсолютного позиціонування обов'язково потрібно вказати position: absolute та хоча б одну координату по вертикалі і одну по горизонталі.

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

.element {
  position: absolute;
  top: 50px;
  left: 100px;
}