Пошук уроків, статей та іншого контенту
Значення position — static, relative, absolute, fixed, sticky — і контекст стекування z-index.
За замовчуванням елементи розташовуються в звичайному потоці документа — блокові елементи одне під одним, рядкові — поспіль зліва направо, кожен займає своє природне місце. Властивості top/left/right/bottom не мають жодного ефекту для position: static.
.badge {
position: relative;
top: -5px; /* зсунути на 5px ВГОРУ від природного місця */
left: 10px; /* зсунути на 10px ВПРАВО від природного місця */
}Елемент з position: relative лишається в потоці документа (місце під нього зарезервоване, ніби зсуву й не було), але візуально зсувається відносно власної природної позиції. Практично важлива додаткова роль relative — він створює контекст позиціонування для нащадків з position: absolute (наступний пункт).
.card {
position: relative; /* контекст для .badge нижче */
}
.badge {
position: absolute;
top: 8px;
right: 8px; /* позиція відносно .card, а не всієї сторінки */
}Елемент з position: absolute вилучається з потоку документа повністю (місце під нього більше не резервується) і позиціонується відносно найближчого предка з position, відмінним від static, — якщо такого предка немає, відносно всього документа. Саме тому badge/бейдж у верхньому куті картки — типовий приклад: .card отримує position: relative спеціально, щоб стати точкою відліку для .badge.
position: fixed позиціонує елемент відносно вікна перегляду браузера (viewport), а не документа, — елемент лишається на тому самому місці екрана навіть під час прокрутки сторінки. Типовий випадок використання — фіксована шапка сайту чи кнопка «нагору».
.section-header {
position: sticky;
top: 0; /* «прилипає» до верху вікна, коли досягає цієї позиції під час скролу */
}position: sticky поводиться як static, доки елемент не досягне заданого порогу (top: 0) під час прокрутки, а потім поводиться як fixed відносно найближчого прокручуваного предка — типово для заголовків розділів, що «прилипають» угорі під час скролу списку.
z-index визначає порядок накладання елементів одне на одного по осі, перпендикулярній екрану, — але лише для позиціонованих елементів (position, відмінний від static) і лише в межах спільного контексту стекування. Вищий z-index виводить елемент поверх елементів із нижчим значенням у тому самому контексті.
z-index не працює для елементів із position: static — властивість просто ігнорується. Класична пастка: z-index: 9999 на елементі, який усе одно виявляється позаду іншого, — часто причина в тому, що елементи належать різним, вкладеним контекстам стекування (наприклад, через transform чи opacity на батьківському елементі), де порівняння z-index між ними не працює так, як очікувалось на глобальному рівні.
position: absolute без position: relative (чи іншого не-static значення) на батьківському елементі — елемент позиціонується відносно всього документа, а не очікуваного локального контейнера.
Очікувати ефекту z-index на елементі з position: static — z-index діє лише на позиціоновані елементи.
Зловживання position: absolute для верстки цілих секцій сторінки замість Flexbox/Grid (наступний модуль) — абсолютне позиціонування вилучає елемент із потоку документа, що ускладнює адаптивність і природне розташування сусідніх елементів.
position: static — типовий потік документа; relative зсуває елемент від власної природної позиції, лишаючи місце в потоці; absolute вилучає з потоку й позиціонує відносно найближчого не-static предка; fixed прив'язує до вікна перегляду; sticky — гібрид, що «прилипає» під час скролу. z-index керує порядком накладання, але діє лише на позиціоновані елементи й лише в межах спільного контексту стекування.