Ответ
Для фиксированного header'а, который остаётся наверху при прокрутке, используй position: fixed. Это привяжет элемент к viewport.
Для sticky header'а, который прилипает при прокрутке до определённой точки, подойдёт position: sticky.
Пример:
.header {
position: sticky; /* или fixed */
top: 0;
z-index: 100; /* чтобы header был поверх других элементов */
background: white;
padding: 1rem;
}
fixed — всегда в viewport, sticky — прилипает при прокрутке. Выбор зависит от дизайна.