Пошук уроків, статей та іншого контенту
Закріпите елементи відносно вікна браузера та створите кнопки, панелі й інші постійно видимі компоненти.
position: fixedВластивість position: fixed закріплює елемент відносно вікна браузера, або viewport. Елемент залишається на тому самому місці під час прокручування сторінки.
.help-button {
position: fixed;
right: 24px;
bottom: 24px;
}У цьому прикладі кнопка буде розташована на відстані 24px від правого та нижнього країв вікна браузера. Навіть якщо користувач прокрутить сторінку, кнопка залишиться видимою в тому самому місці.
На відміну від звичайного позиціонування:
елемент вилучається з нормального потоку документа;
його положення визначається відносно вікна браузера;
він не переміщується разом із документом під час прокручування.
Самого position: fixed недостатньо, щоб визначити точне місце елемента. Потрібно використати одну або кілька властивостей зміщення:
top — відстань від верхнього краю;
right — відстань від правого краю;
bottom — відстань від нижнього краю;
left — відстань від лівого краю.
.notification {
position: fixed;
top: 20px;
right: 20px;
}Елемент буде розташований у правому верхньому куті з відступами по 20px.
Можна використовувати протилежні сторони разом:
.full-width-panel {
position: fixed;
top: 0;
left: 0;
right: 0;
}Така панель буде притиснута до верхнього краю та розтягнута на всю ширину вікна.
Поширений приклад використання fixed — кнопка дії, яка має бути доступною в будь-якій частині сторінки.
<!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;
font-family: Arial, sans-serif;
line-height: 1.6;
background: #f3f4f6;
}
main {
max-width: 720px;
margin: 0 auto;
padding: 32px 20px 120px;
}
section {
min-height: 500px;
margin-bottom: 24px;
padding: 24px;
background: white;
border-radius: 12px;
}
.contact-button {
position: fixed;
right: 24px;
bottom: 24px;
padding: 14px 20px;
border: 0;
border-radius: 999px;
color: white;
background: #2563eb;
font: inherit;
font-weight: 700;
cursor: pointer;
box-shadow: 0 8px 20px rgb(0 0 0 / 20%);
}
.contact-button:hover {
background: #1d4ed8;
}
</style>
</head>
<body>
<main>
<section>
<h1>Сторінка зі статтею</h1>
<p>
Прокрутіть сторінку вниз. Кнопка зв’язку залишатиметься
у правому нижньому куті вікна браузера.
</p>
</section>
<section>
<h2>Додатковий розділ</h2>
<p>
Фіксовані елементи зручні для важливих дій, які мають бути
доступними незалежно від поточної позиції прокручування.
</p>
</section>
<section>
<h2>Ще один розділ</h2>
<p>
Відступ знизу в основного вмісту залишає місце для кнопки,
щоб вона не перекривала останній текст.
</p>
</section>
</main>
<button class="contact-button" type="button">
Написати нам
</button>
</body>
</html>Кнопка не займає місце в документі. Тому інший вміст не враховує її розмір під час розташування.
fixed часто використовують для панелей навігації, які мають залишатися зверху.
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 64px;
padding: 0 24px;
background: #111827;
color: white;
}Оскільки панель вилучена з нормального потоку, вона може накрити початок сторінки. Щоб цього не сталося, потрібно додати верхній відступ до основного вмісту:
body {
margin: 0;
padding-top: 64px;
}Значення padding-top має відповідати висоті панелі.
Повний приклад:
<!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;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding-top: 64px;
font-family: Arial, sans-serif;
line-height: 1.6;
}
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10;
min-height: 64px;
padding: 16px 24px;
background: #172554;
color: white;
}
.navigation {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 960px;
margin: 0 auto;
}
.logo {
color: inherit;
font-weight: 700;
text-decoration: none;
}
.navigation a {
margin-left: 16px;
color: inherit;
text-decoration: none;
}
.navigation a:hover {
text-decoration: underline;
}
main {
max-width: 960px;
margin: 0 auto;
padding: 24px;
}
section {
min-height: 500px;
padding: 24px 0;
border-bottom: 1px solid #d1d5db;
}
</style>
</head>
<body>
<header class="site-header">
<nav class="navigation" aria-label="Основна навігація">
<a class="logo" href="#top">Мій сайт</a>
<div>
<a href="#about">Про нас</a>
<a href="#contacts">Контакти</a>
</div>
</nav>
</header>
<main id="top">
<section id="about">
<h1>Про нас</h1>
<p>
Навігаційна панель залишається у верхній частині вікна
під час прокручування.
</p>
</section>
<section id="contacts">
<h2>Контакти</h2>
<p>
Перехід за навігаційним посиланням прокручує сторінку
до відповідного розділу.
</p>
</section>
</main>
</body>
</html>Фіксованому елементу можна задати конкретні width і height:
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 280px;
padding: 24px;
background: #e5e7eb;
}Одночасне використання top: 0 і bottom: 0 розтягує елемент на всю висоту вікна. Висота в цьому випадку визначається автоматично.
Якщо панель може містити багато вмісту, додайте прокручування всередині неї:
.sidebar {
overflow-y: auto;
}Без overflow-y: auto частина вмісту може вийти за межі видимої області.
z-indexФіксований елемент може опинитися під іншими елементами. Для керування порядком накладання використовується z-index:
.header {
position: fixed;
z-index: 100;
}
.modal {
position: fixed;
z-index: 1000;
}Елемент із більшим значенням z-index зазвичай відображається поверх елемента з меншим значенням.
Важливо, щоб z-index працював у контексті позиціонування. Для практичних компонентів достатньо спочатку задати елементу position: fixed, а потім підібрати значення z-index.
.cookie-banner {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 20;
}Не варто без потреби використовувати надзвичайно великі значення на кшталт 999999. Краще створити зрозумілу систему рівнів, наприклад:
10 — основна навігація;
20 — повідомлення;
30 — важлива панель.
Для фіксованих елементів важливо залишити достатній простір між компонентом і краєм viewport:
.toast {
position: fixed;
right: 16px;
bottom: 16px;
max-width: 360px;
padding: 16px;
}На вузьких екранах ширина може стати проблемою. Замість фіксованої ширини можна використати адаптивне обмеження:
.toast {
width: min(360px, calc(100vw - 32px));
}Елемент матиме ширину не більше 360px, але залишить по 16px з кожного боку на маленькому екрані.
Для мобільних пристроїв також можна використовувати медіазапит:
@media (max-width: 600px) {
.toast {
right: 16px;
bottom: 16px;
left: 16px;
width: auto;
}
}Фіксовані панелі не займають місця в потоці. Через це вони можуть перекривати вміст.
Для верхньої панелі:
body {
padding-top: 64px;
}Для нижньої панелі:
body {
padding-bottom: 80px;
}Або можна додати відступ безпосередньо до основного вмісту:
main {
padding-bottom: 100px;
}Розмір відступу має бути не меншим за висоту фіксованого компонента.
fixed і absoluteОбидва значення вилучають елемент із нормального потоку, але мають різну поведінку:
position: absolute позиціонує елемент відносно найближчого позиціонованого предка;
position: fixed позиціонує елемент відносно вікна браузера;
absolute прокручується разом із документом;
fixed залишається на місці під час прокручування.
/* Елемент рухається разом із блоком-контейнером */
.badge {
position: absolute;
top: 12px;
right: 12px;
}
/* Елемент залишається на одному місці у viewport */
.support-button {
position: fixed;
right: 24px;
bottom: 24px;
}Вибирайте fixed, коли компонент має бути прив’язаний саме до вікна браузера: наприклад, постійна кнопка, верхня панель або повідомлення.
Постійно видимий елемент не повинен заважати користуватися сторінкою.
Перевірте, що:
текст кнопки пояснює її дію;
контраст тексту та фону достатній;
елемент не перекриває важливий вміст;
кнопка доступна для клавіатури;
на маленькому екрані компонент не займає всю корисну область.
Для декоративної кнопки не використовуйте лише іконку без пояснення. Якщо кнопка містить тільки іконку, додайте доступну назву:
<button class="close-button" type="button" aria-label="Закрити повідомлення">
×
</button>.panel {
position: fixed;
}Без top, right, bottom або left браузер збереже поточне положення елемента, що часто дає неочікуваний результат.
Краще явно вказати хоча б одну або кілька координат:
.panel {
position: fixed;
top: 0;
right: 0;
}Якщо верхня панель має висоту 64px, але для body не задано верхнього відступу, початок сторінки може опинитися під панеллю.
body {
padding-top: 64px;
}Панель із великою шириною або висотою може перекрити більшість сторінки на мобільному пристрої. Використовуйте max-width, адаптивні ширини та медіазапити.
z-indexКомпонент може бути зафіксований правильно, але залишатися під іншим блоком. Перевірте порядок накладання та задайте зрозуміле значення z-index.
Якщо кнопка розташована внизу, вона може перекрити останній абзац або кнопку форми. Додайте нижній padding до основного вмісту.
position: fixed закріплює елемент відносно вікна браузера.
Фіксований елемент не рухається під час прокручування сторінки.
Для позиціонування використовують top, right, bottom і left.
Фіксований елемент вилучається з нормального потоку та може перекривати вміст.
Для керування накладанням використовується z-index.
Верхні й нижні панелі потребують відповідних відступів у сторінки.
На малих екранах фіксовані компоненти потрібно робити адаптивними.