Тема позиционирования не заканчивается только на относительном и абсолютном. Их вполне достаточно для большинства возникающих ситуаций — это очень мощные и гибкие инструменты.
Но бывают ситуации, где нелегко обойтись каким-то одним из этих двух видов позиционирования. Представьте, что нам необходимо сделать шапку сайта, которая будет перемещаться вместе с тем, как пользователь скролит страницу. Ни относительное, ни абсолютное позиционирование здесь не подойдет по одной простой причине: блок не будет перемещаться при прокрутке. Он застынет на том месте в документе, где было указано.
Для решения такой проблемы существует фиксированное позиционирование. Оно очень похоже на абсолютное:
top
, right
, bottom
, left
.Отличительной чертой фиксированного позиционирования является то, что элемент позиционируется относительно видимой области браузера. То есть, если установить координаты 0 по верхней границе и 0 по левой границе, то элемент всегда будет в этой позиции, вне зависимости от того, прокручивает пользователь сейчас страницу или нет.
<style>
.fixed {
position: fixed;
top: 0;
left: 0;
}
</style>
<div class="fixed">Блок с фиксированным расположением. Его координаты относительно видимой области браузера всегда будут одни и те же.</div>
Попробуйте пролистать текст, и вы увидите, что левая область остается на месте. Таким образом зачастую создают меню, которое пользователь может всегда видеть.
Вам ответят команда поддержки Хекслета или другие студенты.
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
Наши выпускники работают в компаниях:
Зарегистрируйтесь или войдите в свой аккаунт