8.1 Нормальний потік
Позиціонування елементів у CSS відіграє ключову роль в управлінні їх розташуванням і взаємодією на веб-сторінці. Воно визначає, як елементи розташовуються відносно інших елементів і свого контейнера. Розглянемо, як різні види позиціонування впливають на потік елементів.
Потік документа і позиціонування
Елементи в нормальному потоці документа розташовуються один за одним у порядку, визначеному HTML-розміткою. Блочні елементи (наприклад, <div>, <p>, <h1>) розташовуються вертикально, займаючи всю ширину контейнера-батька, а стрічкові елементи (наприклад, <span>, <a>, <em>) розташовуються горизонтально, займаючи лише необхідний простір.
Приклад:
.block {
background-color: lightblue;
margin: 10px;
padding: 10px;
}
.inline {
background-color: lightcoral;
margin: 5px;
padding: 5px;
}
<div class="block">Блочний елемент</div>
<span class="inline">Стрічковий елемент</span>
<span class="inline">Стрічковий елемент</span>
8.2 Вплив позиціонування на потік документа
Різні типи позиціонування можуть змінювати стандартний потік документа. Розглянемо, як це відбувається:
Позиціонування static
Позиціонування static є значенням за замовчуванням і не змінює нормальний потік документа. Елементи з position: static розташовуються у порядку, визначеному HTML-розміткою.
Вплив на потік:
- Елементи залишаються в нормальному потоці
- Елементи розташовуються один за одним відповідно до їх порядку в HTML
Позиціонування relative
Елементи з position: relative залишаються в нормальному потоці, але можуть бути зміщені відносно свого нормального положення за допомогою властивостей top, right, bottom, left. Зміщення не впливає на розташування інших елементів.
Вплив на потік:
- Елементи залишаються в нормальному потоці
- Зміщення елемента не змінює розташування сусідніх елементів
Позиціонування absolute
Елементи з position: absolute вилучаються з нормального потоку документа і розташовуються відносно найближчого позиціонованого предка. Якщо такого предка немає, вони розташовуються відносно початкового контейнера (зазвичай це <html> або <body>).
Вплив на потік:
- Елементи вилучаються з нормального потоку
- Розташовуються відносно найближчого позиціонованого предка
- Інші елементи поводяться так, ніби цих елементів немає
Позиціонування fixed
Елементи з position: fixed вилучаються з нормального потоку і розташовуються відносно вікна браузера. Вони залишаються на місці під час прокручування сторінки.
Вплив на потік:
- Елементи вилучаються з нормального потоку
- Розташовуються відносно вікна браузера
- Залишаються на місці під час прокручування сторінки
- Інші елементи поводяться так, ніби цих елементів немає
Позиціонування sticky
Елементи з position: sticky поводяться як відносно позиціоновані до тих пір, поки не досягнуть заданого порогу прокручування, після чого вони стають фіксованими.
Вплив на потік:
- Елементи залишаються в нормальному потоці до досягнення порогу прокручування
- Після досягнення порогу елемент фіксується і більше не впливає на нормальний потік
8.3 Візуальні приклади впливу на потік
1. Приклад з фіксованим позиціонуванням:
.wrapper {
height: 200px;
overflow: auto;
}
.fixed {
position: fixed;
top: 10px;
right: 10px;
background-color: lightcoral;
padding: 10px;
}
.content {
background: linear-gradient(white, lightgray);
}
<div class="wrapper">
<div class="fixed">Фіксований елемент</div>
<div class="content">Прокручуваний контент
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
...
</div>
</div>
2. Приклад з липким позиціонуванням:
.wrapper {
height: 200px;
overflow: auto;
}
.sticky {
position: sticky;
top: 0;
background-color: lightgreen;
padding: 10px;
}
.content {
background: linear-gradient(white, lightgray);
}
<div class="wrapper">
<div class="sticky">Липкий елемент</div>
<div class="content">
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed портtitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
...
</div>
</div>
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ