Народ, всем привет. CSS-свойство position одно из самых недооценённых, но фундаментальных в вёрстке. Оно определяет, как элемент располагается на странице и к чему он «привязан», к родителю, к окну браузера или к самому себе. Многие разработчики годами используют position по наитию, не до конца понимая механику, просто копируют его из предыдущего блока. Предлагаю это исправить, и сегодня мы разложим всё по полочкам, без магии, только логика и примеры.
Что делает position вообще
Каждый HTML-элемент изначально располагается в потоке документа. Это значит, что его место и размеры влияют на соседние элементы. Например, если добавить новый <div>, он сдвинет остальные вниз. Свойство position позволяет изменить стандартное поведение и сказать браузеру: “Этот элемент должен располагаться не так, как все остальные.” Position может принимать несколько значений:
- static — значение по умолчанию;
- relative — позиционирование относительно самого себя;
- absolute — позиционирование относительно ближайшего родителя с position отличным от static;
- fixed — позиционирование относительно окна браузера;
- sticky — комбинация relative и fixed, «прилипание» при скролле.
static, жизнь по умолчанию
Когда ты не задаёшь position, элемент ведёт себя как обычный блок, т.е. участвует в потоке, соседние элементы его «чувствуют», отступы работают, всё спокойно.
div {
position: static;
}
Здесь ничего особенного не произойдёт. И самое важное, координаты (top, left, right, bottom) не работают для static. Они просто игнорируются.
relative, тот же поток, но с “сдвигом”
Position: relative оставляет элемент в потоке, но позволяет сместить его относительно своего исходного положения.
.box {
position: relative;
top: 10px;
left: 20px;
}
Элемент сдвинется на 10px вниз и на 20px вправо, но место, которое он занимал, сохранится. Это значит, что соседи не заполнят освободившееся пространство, как будто он остался на месте, просто “переехал” визуально. Его используют, чтобы слегка подвинуть элемент без ломки верстки и чтобы создать контекст для absolute-дочерних элементов (о чём ниже).
absolute, вне потока
Когда элемент получает position: absolute, он выпадает из потока. Браузер перестаёт учитывать его размер и позицию и для соседних элементов он как будто исчезает. Теперь координаты (top, left, right, bottom) задают точное положение. Но относительно чего? Все просто, относительно первого родителя, у которого есть position, отличное от static. Если такого родителя нет — элемент позиционируется относительно всей страницы (<html>).
<div class="parent">
<div class="child"></div>
</div>
.parent {
position: relative; /* создаёт контекст */
width: 300px;
height: 300px;
background: lightgray;
}
.child {
position: absolute;
top: 10px;
right: 10px;
width: 50px;
height: 50px;
background: tomato;
}
Результат: красный квадрат будет расположен в правом верхнем углу серого блока, а не всей страницы. Чаще всего такой вариант используют для всплывающих меню, подсказок, модальных окон и для элементов, которые должны “жить” внутри конкретного контейнера.
Хотите знать больше? Читайте нас в нашем Telegram – там еще больше интересного: новинки гаджетов, технологии, AI, фишки программистов, примеры дизайна и маркетинга.
fixed, приклеено к окну
Position: fixed — это когда элемент выпадает из потока и фиксируется относительно окна браузера. Даже если страница скроллится, элемент остаётся на месте.
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: white;
}
Так, напрмиер, можно закрепить шапку сайта сверху и она не двигается при прокрутке. У данного свойства есть свои особенности, раз уж фиксированные элементы всегда остаются на одном месте экрана. Во-первых, z-index часто приходится задавать вручную, чтобы элемент не “прятался” за другими, а во-вторых, fixed работает относительно окна просмотра, а не документа.
sticky, магия прилипания
Есть еще position: sticky — относительно новое, но очень удобное значение. Это гибрид relative и fixed. По умолчанию элемент ведёт себя как relative, т.е. находится в потоке. Но как только пользователь прокручивает страницу до определённой точки (например, top: 0), элемент становится “прилипшим” и начинает вести себя как fixed.
.menu {
position: sticky;
top: 0;
background: white;
}
Такое меню будет двигаться вместе со страницей, пока не “дойдёт” до верхнего края окна, после чего закрепится. Когда прокрутка закончится, меню снова вернётся в обычное положение. Важно, чтобы sticky работал, у родителя должен быть ограниченный по высоте блок (например, overflow: auto; или фиксированная высота), а также если у родителя overflow: hidden, “прилипание” может не сработать.
Как мыслить в координатах CSS
Чтобы понять position, нужно научиться думать в контекстах позиционирования:
- relative создаёт локальную систему координат;
- absolute ищет ближайшую такую систему;
- fixed использует окно браузера как систему координат;
- sticky переключается между relative и fixed в зависимости от прокрутки.
Если помнить эти принципы, позиционирование перестаёт быть “магией” и становится предсказуемым инструментом. CSS это не набор хаотичных правил, а система, где каждое свойство логично. Освоив position, ты получаешь мощный инструмент контроля за макетом, а не просто “двигаешь дивы”.
Если Вам нравятся наши статьи, и вы хотите отблагодарить автора (на развитие канала), нам будет очень приятно!
