4.1 absolute positioning
Абсолютне позиціонування (absolute positioning) в CSS дозволяє точно керувати розташуванням елементів на веб-сторінці. При використанні абсолютного позиціонування елемент видаляється з нормального потоку документа і розміщується відносно найближчого позиціонованого предка. Якщо такого предка немає, елемент буде позиціонуватися відносно початкового контейнера (зазвичай це <html> або <body>).
Основні особливості абсолютного позиціонування:
- Видалення з потоку документа: абсолютно позиціоновані елементи не впливають на інші елементи і не враховуються при розрахунку розмірів батьківських елементів.
- Відносне позиціонування: елементи розташовуються відносно найближчого предка з відносним (
position: relative), абсолютним (position: absolute), фіксованим (position: fixed) або липким (position: sticky) позиціонуванням. - Використання координат: властивості
top,right,bottomіleftвикористовуються для задання точного положення елемента.
Приклад базового абсолютного позиціонування
Розглянемо простий приклад з абсолютним позиціонуванням елемента:
.container {
position: relative;
width: 300px;
height: 300px;
background-color: lightgrey;
}
.box {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: deepskyblue;
}
<div class="container">
<div class="box">Absolute Box</div>
</div>
У цьому прикладі елемент .box позиціонується відносно батьківського контейнера .container, який має position: relative;.
4.2 Створення накладень (оверлеїв)
Абсолютне позиціонування часто використовується для створення накладень, таких як модальні вікна, спливаючі підказки і лайтбокси.
Приклад абсолютного позиціонування:
.wrapper {
min-height: 300px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
<div class="wrapper">
<div class="overlay">
<div class="modal">
<p>Modal Content</p>
</div>
</div>
</div>
4.3 Точні макети і компоненти інтерфейсу
Абсолютне позиціонування корисне для створення точних макетів, таких як елементи керування в медіа-програвачах, користувацькі елементи керування і панелі інструментів.
Приклад абсолютного позиціонування:
.player {
position: relative;
width: 400px;
height: 50px;
background-color: #333;
color: white;
}
.play-button {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
.volume-control {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
<div class="player">
<div class="play-button">Play</div>
<div class="volume-control">Volume</div>
</div>
4.4 Створення складних макетів
Абсолютне позиціонування дозволяє створювати складні макети, такі як інформаційні панелі і інтерактивні елементи.
Приклад абсолютного позиціонування:
.dashboard {
position: relative;
width: 800px;
height: 600px;
background-color: #f0f0f0;
}
.sidebar {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100%;
background-color: #333;
color: white;
}
.main-content {
position: absolute;
top: 0;
left: 200px;
width: calc(100% - 200px);
height: 100%;
background-color: #fff;
}
<div class="dashboard">
<div class="sidebar">Sidebar</div>
<div class="main-content">Main Content</div>
</div>
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ