В чем разница между разными видами позиционирования?

Виды позиционирования в CSS (`position`) различаются тем, относительно чего размещается элемент: `static`, `relative`, `absolute`, `fixed`, `sticky`.

static (по умолчанию)

Элемент в обычном потоке; top/left/right/bottom и z-index не действуют:

.el { position: static; }

relative

В потоке (место сохраняется), но можно сместить относительно своего исходного положения:

.el { position: relative; top: 10px; left: 20px; }

Также создаёт контекст для абсолютно позиционированных потомков.

absolute

Вынимается из потока (место не занимает), позиционируется относительно ближайшего позиционированного предка (не static), иначе — относительно <html>:

.parent { position: relative; }
.child { position: absolute; top: 0; right: 0; }

Для оверлеев, тултипов, бейджей.

fixed

Вынимается из потока, позиционируется относительно окна (viewport) — не двигается при прокрутке:

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

Для липких хедеров, кнопок «наверх», модалок.

sticky

Гибрид relative и fixed: ведёт себя как relative, пока не достигнет порога прокрутки, затем «прилипает» как fixed:

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

Для липких заголовков секций.

Коротко для собеседования

static — обычный поток (смещения не работают). relative — смещение относительно себя, создаёт контекст. absolute — вне потока, относительно позиционированного предка. fixed — вне потока, относительно viewport (не двигается при скролле). sticky — relative до порога, потом fixed (прилипает).