Как сделать фиксированную шапку сайта css

Чтобы сделать фиксированную (закрепленную) шапку сайта в CSS, можно использовать свойство position: fixed;.

Вот пример кода, который создаст фиксированную шапку с заданным фоновым цветом и размером высоты:

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #333;
  color: #fff;
}

• position: fixed; задает, что элемент должен быть расположен в фиксированном положении на странице.
• top: 0; left: 0; указывают координаты верхнего левого угла элемента, от которых будет начинаться позиционирование элемента.
• width: 100%; делает ширину элемента равной 100% ширины родительского элемента (обычно это body).
• height: 60px; задает высоту элемента (в данном случае, 60 пикселей).
• background-color: #333; устанавливает цвет фона элемента.
• color: #fff; устанавливает цвет текста внутри элемента.

Помните, что фиксированная шапка может перекрывать другие элементы, поэтому обычно для нее добавляется отступ сверху для перемещения следующего контента вниз:

body {
  padding-top: 60px; /* высота шапки */
}

С помощью padding-top мы добавляем отступ сверху для перемещения тела страницы вниз на высоту шапки.