Как закрепить шапку CSS

Для того, чтобы закрепить шапку (или другой элемент страницы) в верхней части окна браузера при прокрутке страницы, можно использовать свойство “position” и задать ему значение “fixed”. Это свойство зафиксирует элемент относительно окна браузера, так что он будет оставаться на одном месте независимо от прокрутки страницы.

Пример CSS-кода, который закрепляет шапку сайта в верхней части страницы:

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

В этом примере мы задаем свойство “position” со значением “fixed”, чтобы зафиксировать элемент “header” на месте. Значение “top: 0” задает расположение элемента относительно верхнего края окна браузера, а “left: 0” – относительно левого края окна. “width: 100%” задает ширину элемента равной ширине окна браузера, чтобы элемент занимал всю ширину страницы. Значение “z-index: 9999” задает элементу высокий индекс, чтобы он находился выше других элементов на странице.

Также, если вы хотите закрепить элемент в нижней части окна браузера, то можно использовать свойство “bottom” вместо “top”:

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}

Этот CSS-код закрепит элемент “footer” в нижней части окна браузера.

реклама

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

реклама

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

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

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

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

Закажите услугу Как закрепить шапку CSS

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