CSS

Какие виды позиционирования есть в CSS?

Позиционирование в CSS

static

По умолчанию. Элемент в нормальном потоке. Свойства top/left/right/bottom не работают.

relative

Смещается от своего нормального места. Остаётся в потоке (занимает своё исходное место).

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

absolute

Вырывается из потока. Позиционируется относительно ближайшего предка с position ≠ static.

.parent  { position: relative }
.tooltip { position: absolute; top: 100%; left: 0 }

fixed

Как absolute, но относительно viewport. При прокрутке не двигается.

.header { position: fixed; top: 0; left: 0; width: 100% }

sticky

Ведёт себя как relative, пока не достигнет порога при прокрутке - затем «прилипает».

th { position: sticky; top: 0; background: white }

Источники