Главная идея
По умолчанию браузер раскладывает элементы в потоке: блоки идут сверху вниз, строчные — слева направо. Свойство position разрешает выйти за пределы этого порядка и сдвинуть элемент относительно выбранной точки отсчёта. Точку отсчёта и поведение в потоке задаёт именно значение position, а конкретное смещение — свойства top, right, bottom, left (и сокращение inset).
Представь школьный класс. static — ученик сидит за своей партой как все. relative — он чуть подвинул стул вправо, но его парта по-прежнему «занята», соседи место не заняли. absolute — он встал и пересел туда, куда указал учитель (ближайший позиционированный предок), а его парта освободилась. fixed — он прилип к дверному проёму класса (окну) и стоит там, даже когда все пишут. sticky — идёт вдоль доски и останавливается, как только дойдёт до её края.
Как работает каждое значение
static — значение по умолчанию. Элемент в обычном потоке, свойства top/right/bottom/left и z-index на него не влияют. Любой элемент без явного position — статический.
relative — элемент остаётся в потоке (его место никто не занимает!), но визуально сдвигается от исходного положения на заданные top/left. Чаще всего relative ставят родителю не ради сдвига, а чтобы создать контекст позиционирования для absolute-потомков.
absolute — элемент выпадает из потока (соседи смыкаются, будто его нет) и позиционируется относительно ближайшего предка с position не static. Если такого предка нет — относительно корня страницы. Отсюда правило: «absolute-потомку — relative-родителя».
fixed — тоже выпадает из потока, но точка отсчёта — окно браузера (viewport). Элемент остаётся на месте при прокрутке: плавающие кнопки «Наверх», шапки, всплывающие панели.
sticky — гибрид: пока элемент не дошёл до порога (например top: 0) при прокрутке, ведёт себя как relative; достигнув порога — «прилипает» к краю и едет вместе с экраном, но только в границах своего родителя.
Точка отсчёта для смещений
top: 20px отодвигает элемент на 20px от верхнего края точки отсчёта, left: 20px — от левого, и так далее. Та же схема для всех значений, кроме static:
Контекст позиционирования (для absolute)
Самое важное на практике: absolute-элемент ищет «якорь» — ближайшего предка с любым position, кроме static. Поэтому родителю задают position: relative, чтобы бейдж/значок встал в его углу, а не в углу всей страницы.
Когда что применять
relative— как контекст для absolute-потомков; редко — для микросдвига.absolute— бейджи, значки, оверлеи, тултипы внутри карточек.fixed— кнопка «Наверх», фиксированная навигация, модальные окна.sticky— липкая шапка таблицы, заголовок секции, боковое меню.
Частая ошибка
absolute-элемент уехал в угол всей страницы, а не карточки — забыли задать родителю position: relative. Второй частый случай: sticky «не липнет», потому что не задан top или у одного из родителей стоит overflow: hidden/auto.
z-index и контекст наложения (stacking context), поведение fixed внутри предка с transform (точкой отсчёта становится этот предок, а не окно) и тонкости sticky + top — выходят за рамки базовой лекции. Сверяйтесь с MDN: position.position у них задано.