Как закрепить шапку 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» в нижней части окна браузера.