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

Как это устроено

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

Четыре режима

• relative — остаётся в потоке; смещение визуальное, «дырка» сохраняется. Часто — якорь для абсолютных детей.
• absolute — вынимается из потока; позиционируется относительно ближайшего предка с position ≠ static (или initial containing block).
• fixed — относительно viewport (с оговорками про transform/filter на предках — тогда «фиксится» к ним).
• sticky — гибрид: в потоке, пока не доскроллили до порога, затем «прилипает» в пределах родителя.

.header { position: sticky; top: 0; z-index: 10; }
.badge {
  position: absolute;
  top: -8px; right: -8px;
}
.parent { position: relative; }

Итог

relative — сдвиг + контекст; absolute — привязка к предку; fixed — к окну; sticky — прилипание при скролле. Без понимающего containing block легко «потерять» элемент.