Какое значение свойства position будешь использовать для реализации header

«Какое значение свойства position будешь использовать для реализации header» — вопрос из категории CSS, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Для фиксированного 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 — прилипает при прокрутке. Выбор зависит от дизайна.