Пошук уроків, статей та іншого контенту
Навчитеся зміщувати елемент відносно його звичайного місця, зберігаючи його простір у потоці документа.
Відносне позиціонування в CSS вмикається значенням:
position: relative;Елемент із position: relative спочатку займає своє звичайне місце в потоці документа. Після цього його можна трохи змістити за допомогою властивостей:
top — зміщення вниз або вгору;
right — зміщення вліво або вправо;
bottom — зміщення вгору або вниз;
left — зміщення вправо або вліво.
Важлива особливість: після зміщення елемента його початкове місце залишається зарезервованим. Інші елементи поводяться так, ніби елемент залишився на старій позиції.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Відносне позиціонування</title>
<style>
.container {
width: 360px;
padding: 20px;
border: 2px solid #333;
}
.box {
width: 120px;
padding: 20px;
background-color: lightblue;
border: 2px solid steelblue;
}
.shifted {
position: relative;
top: 20px;
left: 30px;
background-color: lightcoral;
border-color: darkred;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Перший блок</div>
<div class="box shifted">Зміщений блок</div>
<div class="box">Третій блок</div>
</div>
</body>
</html>У цьому прикладі другий блок:
зміщується на 20px вниз завдяки top: 20px;
зміщується на 30px вправо завдяки left: 30px;
залишає за собою початкове місце;
не впливає на розташування першого й третього блоків.
topВластивість top змінює вертикальне положення:
.element {
position: relative;
top: 15px;
}Позитивне значення зміщує елемент вниз:
top: 15px;Від’ємне значення зміщує елемент вгору:
top: -15px;leftВластивість left змінює горизонтальне положення:
.element {
position: relative;
left: 25px;
}Позитивне значення зміщує елемент вправо, а від’ємне — вліво:
.element {
position: relative;
left: -25px;
}right і bottomТакож можна використовувати right і bottom:
.element {
position: relative;
right: 10px;
bottom: 5px;
}Це змістить елемент:
на 10px вліво;
на 5px вгору.
Для одного напрямку зазвичай використовують або left, або right, а для вертикального зміщення — або top, або bottom. Одночасне використання протилежних властивостей може зробити код менш зрозумілим.
Розглянемо три блоки:
<div class="box">Перший</div>
<div class="box highlighted">Другий</div>
<div class="box">Третій</div>.box {
width: 150px;
padding: 15px;
margin-bottom: 10px;
background-color: #dbeafe;
}
.highlighted {
position: relative;
top: 20px;
}Другий блок візуально опуститься на 20px, але третій блок не переміститься вниз. Для третього блоку початкове місце другого елемента все ще зайняте.
Це відрізняє position: relative від ситуації, коли елемент повністю вилучають із потоку документа.
position: relative можна вказати без top, left, right або bottom:
.card {
position: relative;
}У такому випадку елемент залишиться на своєму звичайному місці. Це все одно може бути корисно, коли потрібно створити систему координат для дочірнього елемента з абсолютним позиціонуванням. Такий сценарій буде розглянуто окремо.
Відносне позиціонування часто використовують для невеликого візуального зміщення елемента:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Відносне позиціонування кнопки</title>
<style>
.button {
display: inline-block;
padding: 12px 20px;
color: white;
background-color: #2563eb;
border: none;
border-radius: 6px;
font: inherit;
cursor: pointer;
}
.button:hover {
position: relative;
top: -2px;
background-color: #1d4ed8;
}
</style>
</head>
<body>
<button class="button">Наведіть курсор</button>
</body>
</html>Коли курсор наведено на кнопку, вона піднімається на 2px. Її місце в документі при цьому не змінюється.
Для зміщення можна використовувати різні одиниці:
.element {
position: relative;
top: 1rem;
left: 5%;
}Найчастіше застосовують:
px — точне зміщення в пікселях;
rem — розмір відносно основного розміру шрифту;
% — відсоткове значення.
Для невеликих декоративних зміщень зазвичай достатньо px або rem.
position: relativeВластивості top, left, right і bottom не зміщують звичайний елемент без позиціонування:
.element {
top: 20px;
left: 10px;
}Щоб зміщення спрацювало, потрібно додати:
.element {
position: relative;
top: 20px;
left: 10px;
}Відносне позиціонування змінює лише візуальне положення елемента. Його початковий простір залишається зайнятим.
Якщо блок змістився вниз, це не означає, що наступні блоки теж перемістяться вниз.
Якщо змістити елемент на велику відстань, він може накластися на інші елементи або вийти за межі контейнера:
.element {
position: relative;
left: 500px;
}Відносне позиціонування найкраще підходить для невеликих коригувань, а не для побудови всієї структури сторінки.
top замість відступівЯкщо потрібно збільшити відстань між блоками, краще використовувати margin або gap:
/* Невдалий спосіб для створення відстані */
.second {
position: relative;
top: 20px;
}
/* Зрозуміліший спосіб */
.second {
margin-top: 20px;
}position: relative призначений для зміщення самого елемента, а не для звичайного керування відстанями між елементами.
Створіть три картки:
Вирівняйте їх у вертикальному списку.
Для другої картки встановіть position: relative.
Змістіть її на 15px вправо і на 10px вниз.
Перевірте, що третя картка не змінила свого початкового місця.
Приклад стилів:
.card {
width: 220px;
padding: 16px;
margin-bottom: 10px;
background-color: #e0f2fe;
border: 1px solid #0284c7;
border-radius: 8px;
}
.card:nth-child(2) {
position: relative;
top: 10px;
left: 15px;
}position: relative дає змогу зміщувати елемент відносно його звичайного місця.
Для зміщення використовують top, right, bottom і left.
Позитивне значення top зміщує елемент вниз, а позитивне значення left — вправо.
Початковий простір елемента залишається в потоці документа.
Інші елементи не переміщуються через візуальне зміщення сусіднього елемента.
Відносне позиціонування найкраще підходить для невеликих коригувань положення та декоративних ефектів.