Позиционирование и z-index
static, relative, absolute, fixed, sticky и контекст наложения.
Обновлено
Что такое позиционирование
По умолчанию элементы находятся в нормальном потоке — один за другим, как в HTML. Свойство position позволяет вынуть элемент из потока или сдвинуть его относительно чего-то.
Типы position
| Значение | Остаётся в потоке? | Позиционируется относительно | Когда |
|---|---|---|---|
static (по умолчанию) |
да | — (top/left не работают) |
обычно |
relative |
да, место сохраняется | своей позиции | небольшой сдвиг; точка отсчёта для детей с absolute |
absolute |
нет | ближайшего позиционированного (не static) предка | бейдж на карточке, иконка в поле, выпадающее меню |
fixed |
нет | окна (viewport) | модалка, оверлей, тост, кнопка «наверх» |
sticky |
да, до порога | прокрутки родителя | липкая шапка, заголовки секций, сайдбар |
Связка relative + absolute
.card { position: relative; } /* становится точкой отсчёта */
.badge { position: absolute; top: 0.5rem; right: 0.5rem; }Без position: relative на карточке бейдж позиционировался бы относительно первого позиционированного предка — часто всей страницы.
inset
inset: 0 = top: 0; right: 0; bottom: 0; left: 0. Оверлей на весь экран:
.overlay { position: fixed; inset: 0; background: rgb(0 0 0 / 0.5); }sticky
.site-header { position: sticky; top: 0; }Элемент идёт в потоке, пока не дойдёт до top: 0, затем прилипает — только в пределах своего родителя. Не работает, если у предка overflow: hidden.
z-index и контекст наложения
z-index решает, кто сверху, но только для позиционированных элементов (или flex/grid-элементов). Ловушка: новый контекст наложения изолирует детей — ребёнок с z-index: 9999 не может подняться над элементом за пределами контекста родителя.
Контекст наложения создают: position + z-index, opacity < 1, transform, filter, isolation: isolate.
Практическое правило: держите маленькую шкалу (10 шапка, 20 выпадающее меню, 50 модалка), а не гонку до 999999.
Коротко
relative= точка отсчёта;absolute= относительно неё;fixed= относительно экрана;sticky= прилипает при прокрутке.inset: 0закрывает всё.z-indexработает внутри контекста наложения.