Position Fixed: что это и как использовать на сайте?

Position fixed - это свойство CSS, которое позволяет "закрепить" элемент на экране, так что он не будет двигаться при прокручивании страницы. Это удобно, когда вы хотите, чтобы некоторые элементы, такие как боковая навигация, были всегда видимы на экране.

Пример кода:

HTML:

  
Добро пожаловать на наш сайт!
  
Здесь вы найдете все, что вам нужно знать о нашей компании.

CSS:

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  background-color: #333;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  padding: 10px;
  border-bottom: 1px solid #555;
}
nav ul li a {
  color: #fff;
  text-decoration: none;
}
section {
  padding-left: 220px;
}

В этом примере мы создаем боковую навигацию, которая закрепляется на экране при помощи свойства position: fixed. Мы также устанавливаем top: 0; и left: 0;, чтобы определить точное положение элемента на экране. Мы также задаем ширину и высоту навигации и стилизуем ее цветом фона, списком и ссылками.

Чтобы предотвратить перекрытие содержимого страницы навигационной областью, мы устанавливаем отступ слева для основного содержания, используя свойство padding-left: 220px;.

Использование свойства position: fixed удобно для создания элементов, таких как боковые панели, меню навигации или всплывающие окна, которые всегда должны быть видимы на экране.