Тема позиционирования не заканчивается только на относительном и абсолютном. Их вполне достаточно для большинства возникающих ситуаций — это очень мощные и гибкие инструменты.
Но бывают ситуации, где нелегко обойтись каким-то одним из этих двух видов позиционирования. Представьте, что нам необходимо сделать шапку сайта, которая будет перемещаться вместе с тем, как пользователь скролит страницу. Ни относительное, ни абсолютное позиционирование здесь не подойдет по одной простой причине: блок не будет перемещаться при прокрутке. Он застынет на том месте в документе, где было указано.
Для решения такой проблемы существует фиксированное позиционирование. Оно очень похоже на абсолютное:
- элемент также выдергивается из нормального потока документа, а его место занимают другие элементы;
- мы можем управлять расположением с помощью правил
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
Попробуйте пролистать текст, и вы увидите, что левая область остается на месте. Таким образом зачастую создают меню, которое пользователь может всегда видеть.
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
