Теория: Фиксированное позиционирование

Тема позиционирования не заканчивается только на относительном и абсолютном. Их вполне достаточно для большинства возникающих ситуаций — это очень мощные и гибкие инструменты.

Но бывают ситуации, где нелегко обойтись каким-то одним из этих двух видов позиционирования. Представьте, что нам необходимо сделать шапку сайта, которая будет перемещаться вместе с тем, как пользователь скролит страницу. Ни относительное, ни абсолютное позиционирование здесь не подойдет по одной простой причине: блок не будет перемещаться при прокрутке. Он застынет на том месте в документе, где было указано.

Для решения такой проблемы существует фиксированное позиционирование. Оно очень похоже на абсолютное:

• элемент также выдергивается из нормального потока документа, а его место занимают другие элементы;
• мы можем управлять расположением с помощью правил top, right, bottom, left.

Отличительной чертой фиксированного позиционирования является то, что элемент позиционируется относительно видимой области браузера. То есть, если установить координаты 0 по верхней границе и 0 по левой границе, то элемент всегда будет в этой позиции, вне зависимости от того, прокручивает пользователь сейчас страницу или нет.

<style>
  .fixed {
    position: fixed;
    top: 0;
    left: 0;
  }
</style>

<div class="fixed">Блок с фиксированным расположением. Его координаты относительно видимой области браузера всегда будут одни и те же.</div>

https://codepen.io/hexlet/pen/OJLOEJJ

Попробуйте пролистать текст, и вы увидите, что левая область остается на месте. Таким образом зачастую создают меню, которое пользователь может всегда видеть.