Пошук уроків, статей та іншого контенту
Розберете властивість position, її значення static та схему координат для позиціонування елементів.
positionВластивість position визначає, як елемент розташовується на сторінці:
.element {
position: static;
}Вона впливає на:
участь елемента у звичайному потоці документа;
спосіб розрахунку його координат;
роботу властивостей top, right, bottom і left.
За замовчуванням кожен елемент має значення:
position: static;Тобто браузер розміщує його у звичайному потоці документа.
У звичайному потоці блоки розташовуються один за одним:
блочні елементи — зверху вниз;
рядкові елементи — зліва направо в межах рядка;
наступні елементи враховують розмір попередніх.
<div class="box first">Перший блок</div>
<div class="box second">Другий блок</div>
<div class="box third">Третій блок</div>.box {
width: 180px;
padding: 20px;
margin-bottom: 10px;
background-color: lightblue;
}
.first {
background-color: lightcoral;
}
.second {
background-color: lightgreen;
}
.third {
background-color: khaki;
}Усі три блоки мають position: static, тому вони розташовуються послідовно. Другий блок починається після першого, а третій — після другого.
staticstatic — це стандартне значення властивості position.
.box {
position: static;
}Такий елемент:
розташовується у звичайному потоці;
займає місце на сторінці;
не змінює позицію через top, right, bottom або left;
може бути переміщений іншими властивостями, наприклад margin.
Наприклад:
<div class="example">
<div class="box">Блок</div>
</div>.example {
width: 300px;
height: 180px;
padding: 20px;
border: 2px solid #333;
}
.box {
position: static;
top: 50px;
left: 50px;
width: 120px;
padding: 20px;
background-color: coral;
}Властивості top і left не перемістять блок, тому що для position: static вони не працюють.
Щоб перемістити статичний елемент, можна використати, наприклад, margin:
.box {
margin-top: 50px;
margin-left: 50px;
}У цьому випадку браузер додасть зовнішні відступи, і розташування блока зміниться в межах звичайного потоку.
Для позиціонування елементів браузер використовує систему координат.
Уявімо початок координат у верхньому лівому куті області позиціонування:
(0, 0) ───────────────► X
│
│
│
▼
YОсобливості координат у CSS:
вісь X спрямована зліва направо;
вісь Y спрямована зверху вниз;
початок координат має значення (0, 0);
відстані зазвичай задають у px, %, rem та інших одиницях.
Наприклад:
left: 20px означає відступ на 20 пікселів від лівого краю;
top: 30px означає відступ на 30 пікселів від верхнього краю;
right: 10px означає відстань 10 пікселів від правого краю;
bottom: 15px означає відстань 15 пікселів від нижнього краю.
Властивості top, right, bottom і left називають координатними властивостями або властивостями зміщення.
Важливо: самі по собі
top,right,bottomіleftне переміщують елемент. Для їхньої роботи потрібне відповідне значенняposition, відмінне відstatic.
Коли елемент позиціонується, браузеру потрібно визначити, відносно якого блока розраховувати координати.
Цей блок називають областю позиціонування або батьківським контейнером для координат.
На початковому етапі достатньо запам’ятати:
координати рахуються від певного верхнього лівого краю;
для position: static координатне зміщення не застосовується;
система координат потрібна для інших режимів позиціонування, які використовують top, right, bottom і left.
У цьому прикладі три блоки розташовані у звичайному потоці. Для першого блока вказані top і left, але через position: static вони ігноруються.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Position static</title>
<style>
.container {
width: 320px;
padding: 20px;
border: 2px solid #333;
background-color: #f3f3f3;
}
.box {
width: 180px;
padding: 20px;
margin-bottom: 10px;
color: #222;
text-align: center;
}
.first {
position: static;
top: 50px;
left: 50px;
background-color: #ff9b85;
}
.second {
background-color: #9be7a5;
}
.third {
background-color: #ffe28a;
}
</style>
</head>
<body>
<div class="container">
<div class="box first">
Перший блок
</div>
<div class="box second">
Другий блок
</div>
<div class="box third">
Третій блок
</div>
</div>
</body>
</html>Перший блок не зміститься на 50px вниз і вправо, оскільки він має:
position: static;Усі блоки залишаться у звичайному потоці та не накладатимуться один на одного.
Під час роботи з position зручно використовувати інструменти розробника браузера:
Відкрийте сторінку в браузері.
Натисніть правою кнопкою миші на елемент.
Виберіть «Перевірити» або «Inspect».
Перегляньте властивість position у панелі стилів.
Тимчасово змінюйте значення CSS і спостерігайте за результатом.
Це допомагає побачити, чи застосувалося правило та чи не перекривається воно іншим CSS-правилом.
top працюватиме зі static.element {
position: static;
top: 20px;
}У такому випадку top не діє. Для static координатне зміщення не застосовується.
top і margin-toptop і margin-top — різні властивості:
margin-top створює зовнішній відступ і впливає на звичайний потік;
top задає координатне зміщення для елементів із відповідним типом позиціонування.
static означає «нерухомий»static не забороняє змінювати розташування елемента. Він означає, що елемент бере участь у звичайному потоці, а координатні властивості для нього не працюють.
Не варто без потреби задавати елементу одразу top, right, bottom і left. Для початку достатньо зрозуміти, від якого краю розраховується потрібне зміщення.
position визначає спосіб розташування елемента.
static — стандартне значення position.
Елемент зі static розташовується у звичайному потоці документа.
Для position: static властивості top, right, bottom і left не працюють.
У CSS вісь X спрямована зліва направо, а вісь Y — зверху вниз.
Координати починаються з точки (0, 0) у верхньому лівому куті відповідної області.
Властивості margin змінюють відступи у звичайному потоці, а координатні властивості використовуються для позиціонування.