Как работает свойство position со значением fixed

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

Особенности:

• Удаляется из нормального потока документа
• Позиционируется с помощью top, right, bottom, left
• Не оставляет пустого пространства там, где был бы в потоке
• На iOS может вести себя нестабильно при появлении/скрытии клавиатуры

Пример:

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: white;
  z-index: 100;
}

Важно: Для fixed элементов с трансформацией (transform) у родителя, элемент будет позиционироваться относительно этого родителя, а не viewport (это особенность спецификации CSS).