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

В CSS есть 5 основных значений position:

1. static (по умолчанию) - элемент следует обычному потоку документа, свойства top, right, bottom, left и z-index не применяются.

2. relative - элемент позиционируется относительно своего обычного положения в потоке. Можно смещать с помощью top, left и др., но место в потоке сохраняется.

3. absolute - элемент вырывается из потока и позиционируется относительно ближайшего позиционированного предка (не static). Если такого нет - относительно документа.

4. fixed - аналогично absolute, но позиционируется относительно viewport (окна браузера), не скроллится.

5. sticky - гибрид relative и fixed. Ведет себя как relative, пока не достигнет заданного смещения, затем "прилипает" как fixed.

Пример:

.box {
  position: sticky;
  top: 20px; /* прилипнет на 20px от верха viewport */
}