Чем отличаются значения position в CSS?

JuniorCSS #css #positioning

Вопрос

Чем отличаются static, relative, absolute, fixed и sticky?

Короткий ответ

position определяет, как элемент участвует в потоке документа и относительно чего вычисляются top/left/right/bottom.

Подробный ответ

static (по умолчанию) — элемент в обычном потоке, top/left не действуют.
relative — остаётся в потоке, но может смещаться относительно своей исходной позиции через top/left. Также создаёт систему координат для потомков с absolute.
absolute — вырывается из потока, позиционируется относительно ближайшего предка с position отличным от static (или <html>, если такого нет).
fixed — вырывается из потока, позиционируется относительно окна просмотра (viewport) и не двигается при скролле.
sticky — гибрид relative и fixed: ведёт себя как relative, пока не достигнет заданного порога (top: 0), затем "прилипает" как fixed в пределах родителя.

Пример

.dropdown {
  position: relative; /* якорь для меню */
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
}

.header {
  position: sticky;
  top: 0;
}

Дополнительные вопросы

Почему sticky иногда "не работает"?
Что такое контекст наложения (stacking context) и как на него влияет position?
Как position: absolute взаимодействует с z-index?