Каждый элемент на веб-странице занимает место в нормальном потоке документа — как книги на полке библиотеки: каждая стоит там, где ей положено по порядку.
Свойство position позволяет вырвать элемент из потока (или не вырывать — зависит от значения) и управлять его положением относительно чего-то: родителя, окна, скролла.
Это не «переместить пиксель влево» — это изменение контекста позиционирования.
position: static — «я не трогал»
Значение по умолчанию. Элемент остаётся в нормальном потоке.
Свойства top, right, bottom, left, z-index игнорируются.
💡 Книга на полке — стоит там, где ей место. Вы не можете сказать: «А поставь её на 5 см выше» — библиотекарь (браузер) проигнорирует вас.
Ничего не меняется — просто есть.
position: relative — «я чуть сдвинулся, но место за мной держат»
Элемент остаётся в потоке (занимает своё исходное место), но можно сдвинуть его относительно самого себя через top, left и т.д.
Важно:
- Остальные элементы не реагируют на сдвиг — будто элемент всё ещё на своём месте.
- Создаёт новый stacking context, если задан z-index ≠ auto.
- Становится контейнером для absolute-потомков.
💡 Человек в очереди шагнул вбок, но держит руку на своём месте в очереди. Очередь не сдвигается — все думают, что он всё ещё там.
position: absolute — «я исчез из потока и приклеился к ближайшему позиционированному предку»
Элемент вырывается из потока — соседи схлопываются, будто его нет.
Позиционируется относительно ближайшего предка с position ≠ static (позиционированный контейнер). Если такого нет — относительно начального содержащего блока (обычно <html>).
⚠️ Распространённая ошибка: родитель div без position: relative — тогда absolute «пробьёт» его и полетит выше.
position: fixed — «я приклеен к окну браузера»
Элемент вырывается из потока и позиционируется относительно viewport (окна браузера), а не документа.
Не двигается при скролле.
💡 Наклейка на стекле автомобиля. Дорога (контент) едет, а наклейка — на стекле. Всегда на одном месте относительно водителя.
⚠️ Особенность: в мобильных Safari при скролле viewport может "прыгать", и fixed ведёт себя нестабильно. Используйте position: sticky или JS-хаки при необходимости.
position: sticky — «я еду в потоке, но могу прилипнуть»
Элемент ведёт себя как relative, пока не достигнет заданного порога (top, left и т.д.) при скролле — тогда переключается в поведение fixed относительно контейнера.
Требования:
- Обязательно указать top/bottom/left/right (иначе не сработает).
- Прилипает только внутри ближайшего прокручиваемого контейнера (обычно <body>, но может быть и overflow: auto).
💡 Пассажир в поезде: сидит на месте (в потоке), но когда поезд въезжает в тоннель (скролл достиг порога), он прижимается к окну и остаётся видимым, пока тоннель не кончится.
Как работает контекст позиционирования
absolute и fixed не просто «смещаются» — они ищут контейнер позиционирования (positioning context).
Порядок поиска:
- Ближайший предок с position: absolute, relative, fixed, sticky — становится контейнером.
- Если нет — <body>.
- Если и <body> static — <html> (initial containing block).
Заключение
position — не про пиксели. Это про контекст:
- Где элемент живёт в потоке?
- К чему он привязан?
- Кто для него родитель в пространстве?
Осознанное использование этих значений — основа адаптивных, управляемых интерфейсов. А не «подвинули на глазок и забыли».