Пошук уроків, статей та іншого контенту
Створите елементи, прив’язані до найближчого позиціонованого предка, і зрозумієте їхню поведінку поза потоком.
position: absoluteВластивість position: absolute виводить елемент із нормального потоку документа та дозволяє розташувати його за допомогою властивостей:
top;
right;
bottom;
left;
inset.
Елемент із position: absolute не займає місця у потоці. Інші елементи поводяться так, ніби абсолютного елемента не існує.
.element {
position: absolute;
top: 20px;
left: 30px;
}Однак координати top, left та інші визначаються не завжди відносно вікна браузера. Абсолютно позиціонований елемент прив’язується до найближчого предка, для якого задано будь-яке значення position, крім static.
Розглянемо структуру:
<div class="card">
<span class="badge">Новинка</span>
<h2>Навушники</h2>
</div>.card {
position: relative;
width: 300px;
padding: 24px;
border: 1px solid #d1d5db;
}
.badge {
position: absolute;
top: 12px;
right: 12px;
}У цьому прикладі .badge позиціонується відносно .card, тому що .card має position: relative.
Значення relative саме по собі не виводить .card із потоку. Воно лише створює систему координат для дочірніх абсолютно позиціонованих елементів.
.card {
position: relative;
}Це один із найпоширеніших шаблонів у CSS:
батьківському елементу задають position: relative;
дочірньому елементу задають position: absolute;
дочірній елемент розташовують за допомогою top, right, bottom або left.
Якщо жоден предок не має позиціонування, абсолютний елемент позиціонується відносно початкового контейнера документа.
<div class="message">Повідомлення</div>.message {
position: absolute;
top: 20px;
right: 20px;
}У такому випадку .message буде розташований біля верхнього правого краю сторінки.
Тому для елементів усередині картки, кнопки чи іншого компонента зазвичай потрібно явно створити локальну систему координат через position: relative у батьківського елемента.
top і left.element {
position: absolute;
top: 10px;
left: 20px;
}Верхній край елемента буде на відстані 10px від верхньої межі контейнера, а лівий — на відстані 20px від лівої межі.
right і bottom.element {
position: absolute;
right: 16px;
bottom: 16px;
}Елемент буде розташований на відстані 16px від правої та нижньої меж контейнера.
insetВластивість inset є скороченням для чотирьох властивостей:
.element {
inset: 10px 20px 30px 40px;
}Це еквівалентно:
.element {
top: 10px;
right: 20px;
bottom: 30px;
left: 40px;
}Порядок значень такий самий, як у margin:
top right bottom leftЯкщо потрібно вказати однакову відстань з усіх боків:
.element {
inset: 16px;
}Абсолютно позиціонований елемент не впливає на розміщення сусідніх елементів.
<div class="container">
<div class="square"></div>
<p>Цей текст не враховує квадрат під час розрахунку позиції.</p>
</div>.container {
position: relative;
width: 300px;
padding: 20px;
border: 1px solid #999;
}
.square {
position: absolute;
top: 20px;
left: 20px;
width: 80px;
height: 80px;
background-color: tomato;
}Параграф може опинитися під квадратом, тому що квадрат не займає місця в потоці.
Це відрізняється від position: relative: відносно позиціонований елемент залишається у потоці й зберігає своє початкове місце.
Нижче наведено повний приклад, який можна зберегти як HTML-файл і відкрити в браузері.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Абсолютне позиціонування</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
background-color: #f3f4f6;
font-family: Arial, sans-serif;
}
.card {
position: relative;
width: 320px;
padding: 24px;
border: 1px solid #d1d5db;
border-radius: 12px;
background-color: white;
box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
}
.card__badge {
position: absolute;
top: 12px;
right: 12px;
padding: 4px 8px;
border-radius: 999px;
color: white;
background-color: #16a34a;
font-size: 12px;
font-weight: 700;
}
.card__title {
margin: 0 0 12px;
padding-right: 72px;
color: #111827;
font-size: 24px;
}
.card__description {
margin: 0;
color: #4b5563;
line-height: 1.5;
}
</style>
</head>
<body>
<article class="card">
<span class="card__badge">Новинка</span>
<h1 class="card__title">Механічна клавіатура</h1>
<p class="card__description">
Компактна клавіатура для роботи та програмування.
</p>
</article>
</body>
</html>.card має position: relative, тому бейдж .card__badge прив’язаний до меж картки. Сам бейдж не впливає на позицію заголовка та опису.
Для заголовка додано padding-right, щоб його текст не заходив під бейдж. Абсолютне позиціонування не резервує для бейджа місце автоматично.
Абсолютний елемент можна розмістити по центру батьківського контейнера за допомогою комбінації:
.element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}top: 50% і left: 50% переміщують верхній лівий кут елемента в центр контейнера. transform: translate(-50%, -50%) зміщує елемент назад на половину його власної ширини та висоти.
Приклад:
<div class="wrapper">
<span class="icon">✓</span>
</div>.wrapper {
position: relative;
width: 160px;
height: 160px;
border-radius: 50%;
background-color: #dbeafe;
}
.icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #1d4ed8;
font-size: 48px;
font-weight: 700;
}Абсолютний елемент можна розтягнути між двома протилежними межами.
.overlay {
position: absolute;
inset: 0;
background-color: rgb(0 0 0 / 40%);
}inset: 0 означає:
.overlay {
top: 0;
right: 0;
bottom: 0;
left: 0;
}Якщо ширину та висоту елемента не задано, але встановлено одночасно left і right, браузер може розтягнути елемент по горизонталі. Аналогічно, top і bottom можуть розтягнути його по вертикалі.
.overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}Цей шаблон часто використовують для фонових шарів усередині контейнера.
z-indexАбсолютно позиціоновані елементи можуть перекривати інші елементи. Якщо потрібно явно керувати порядком шарів, використовують z-index.
.card__badge {
position: absolute;
z-index: 2;
}
.card__image {
position: relative;
z-index: 1;
}Більше значення z-index зазвичай розташовує елемент вище за елементи з меншим значенням у тому самому контексті накладання.
.badge {
position: absolute;
z-index: 10;
}z-index не замінює position: absolute. Він лише керує порядком накладання вже позиціонованих або інших елементів, для яких z-index застосовується.
position: absolute доречний, коли елемент має бути прив’язаний до конкретного компонента:
бейдж у куті картки;
кнопка закриття в модальному вікні;
іконка всередині поля введення;
шар затемнення;
підказка біля елемента;
декоративний елемент у межах компонента;
індикатор стану на аватарі.
Важливо, щоб такий елемент був логічно пов’язаний із контейнером. Якщо елемент має бути частиною звичайного розташування сторінки, абсолютне позиціонування часто буде невдалим вибором.
position: relative у батьківського елемента.card {
/* position: relative; відсутній */
}
.badge {
position: absolute;
top: 8px;
right: 8px;
}У такому випадку бейдж може позиціонуватися відносно сторінки, а не картки.
Правильний варіант:
.card {
position: relative;
}
.badge {
position: absolute;
top: 8px;
right: 8px;
}Абсолютний елемент вилучено з потоку, тому сусідній контент не відсувається автоматично.
Якщо текст має не перекриватися з бейджем, потрібно передбачити для нього простір через padding, margin або інший підхід до компонування.
Не варто розкладати всю сторінку за допомогою top і left. Такий код часто ламається при зміні:
ширини вікна;
розміру шрифту;
кількості тексту;
розміру контенту;
орієнтації пристрою.
absolute найкраще підходить для локальних елементів усередині компонента, а не для побудови всієї структури сторінки.
Якщо елементу задано лише position: absolute і координати, але не задано контент, ширину або висоту, він може мати нульовий чи неочікуваний розмір.
.decoration {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
}Абсолютний елемент може опинитися поверх тексту або кнопок. Потрібно перевіряти результат у різних розмірах контейнера й передбачати місце для перекриття, якщо воно не є навмисним.
position: absolute виводить елемент із нормального потоку.
Координати елемента визначаються відносно найближчого предка з position, відмінним від static.
Найчастіше батьківському контейнеру задають position: relative.
top, right, bottom, left та inset визначають відступи від меж контейнера.
Абсолютний елемент не резервує для себе місце в потоці.
За допомогою top: 50%, left: 50% і transform можна центрувати елемент.
z-index допомагає керувати порядком перекриття.
absolute варто використовувати для локального позиціонування елементів усередині компонентів, а не для всієї структури сторінки.