Как сделать фиксированную шапку сайта 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 мы добавляем отступ сверху для перемещения тела страницы вниз на высоту шапки.

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

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

Наш специалист свяжется с вами в ближайшее время и уточнит детали