Если видео недоступно для просмотра, попробуйте выключить блокировщик рекламы.

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

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

Для решения такой проблемы существует фиксированное позиционирование. Оно очень похоже на абсолютное: элемент также выдёргивается из нормального потока документа, а его место занимают другие элементы; мы можем управлять расположением с помощью правил top, right, bottom, left.

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

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

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

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

Мы учим программированию с нуля до стажировки и работы. Попробуйте наш бесплатный курс «Введение в программирование» или полные программы обучения по Node, PHP, Python и Java.

Хекслет

Подробнее о том, почему наше обучение работает →