В чем разница между position fixed и position sticky

position: fixed фиксирует элемент относительно viewport (окна браузера), независимо от прокрутки. Элемент вырывается из потока документа.

position: sticky — гибрид relative и fixed. Элемент ведёт себя как relative, пока не достигнет заданного смещения (top, left и т.д.), затем "прилипает" к viewport.

Пример:

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

.sticky {
  position: sticky;
  top: 20px;
}

Ключевые отличия:

1. fixed всегда фиксирован, sticky — только после достижения offset
2. fixed не занимает места в потоке, sticky — занимает
3. sticky работает только внутри родительского контейнера