Как работает position: fixed;
Элемент с position: fixed; фиксируется в рамках области просмотра страницы, будь то в окне браузера или в iframe , расстояние до края которой указано в свойствах top , right , bottom , left . Передвинуть его относительно своего расположения можно с помощью margin и transform . Размещение элемента над другими элементами правится с помощью свойства z-index .
После того, как свойство position примет значение fixed , размер элемента может измениться, а соседние элементы сдвинутся на освободившееся пространство.
«Приклеить» элемент, чтобы он не менял своего положения при прокрутке страницы
Элемент с position: fixed; не влияет на размер родителя.
staticfixed
Элемент с position: fixed; не влияет на положение соседей: цифры 20, 21, 22, … смещаются к цифре 19.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 static 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 fixed 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
В отличии от элемента с position: absolute; без родителя с position не static , элемент с position: fixed; не меняет своего положения при скроллинге.
absolute fixed
При отсутствии свойств top , right , bottom , left элемент фиксируется на том месте окна браузера либо iframe , на котором находился до прокрутки. Его не увидеть, если он был ниже области, видимой без прокрутки.
fixedfixedfixed
Расположить элемент с position: fixed; относительно области просмотра окна браузера, iframe и т. п.
область просмотра
элемент
position: fixed;
Свойства top , right , bottom , left могут иметь как положительные, так и отрицательные значения в любых единицах измерения, а также в процентах. По умолчанию у них установлено значение auto .
top right bottom left auto
Значения свойств height , top и bottom в процентах рассчитываются от высоты области просмотра. Свойство height в процентах не заменяется на height: auto; , даже когда ближайший родитель имеет height: auto; . Значения свойств width , margin , padding , left и right в процентах рассчитываются от ширины области просмотра.
Ширина и высота элемента с position: fixed; относительно области просмотра
Ширина элемента с position: fixed; без явно заданного значения устанавливается по содержимому. Элементы с display не block и position: fixed; ведут себя как элементы с display: block; и position: fixed; .
position: fixed; блочного position: fixed; строчного
БлочныйСтрочный
Без явно заданной ширины и/или высоты размер элемента определяется расстоянием от left не auto до right не auto и/или от top не auto до bottom не auto (для IE8+).
border: .5em solid fuchsia; padding: 1em;
Элемент
Стили, чтобы растянуть блок на всю ширину и высоту области просмотра окна браузера, iframe и т. п.:
left: 0; right: 0; top: 0; bottom: 0; /* или */ left: 0; right: 0; width: 100%; height: 100%; box-sizing: border-box;
С ограниченной шириной и/или высотой расстояние от left не auto до right не auto и/или от top не auto до bottom не auto определяет область, в рамках которой может перемещаться элемент с margin: auto; (для того, чтобы передвинуть элемент в центр верхней правой 1/4 части родителя см., left: 50%; right: 0; top: 0; bottom: 50%; ). Если расстояние от left не auto до right не auto меньше width , то свойство right игнорируется (см., left: 50%; right: 50%; ).
border: .5em solid fuchsia; padding: 1em;
Элемент
position: fixed; и overflow не visible
Выходящая за границы родителя с overflow отличным от visible часть элемента с position: fixed; не будет скрыта. Даже если она выйдет за рамки области просмотра, горизонтальная или вертикальная полоса прокрутки не появится.
Элемент
position: fixed; и clip-path или clip
Свойство clip не рекомендуется использовать, так как оно устарело. Ему на смену пришло clip-path . Элемент с position: fixed; не выходит за рамки родителя с одним из них.
/* серым выделено то, что нужно только для clip, так как он работает лишь совместно с position: absolute; */ body < height: 500vh; >.parent .absolute < position: absolute; width: 100%; box-sizing: border-box; height: 5em; border: 1px solid red; clip: rect(0, auto, auto, 0); /* весь периметр родителя */ clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0); /* весь периметр родителя */ > .fixed < /* одинаковое положение для обоих элементов */ position: fixed; top: 1em; left: 5%; > .fixed.red < background: red; >.fixed.lightpink Зафиксированный Зафиксированный
position: fixed; не работает, когда у родителя свойства transform , perspective , filter или will-change имеют значение не none
Элемент с position: fixed; ведёт себя как элемент с position: absolute; относительно ближайшего родителя с transform , perspective , filter или will-change не none . Они создают новый контекст наложения. В браузерах разночтение.
нет нижеприведённых transform: translateX(0); filter: blur(0); perspective: 0; will-change: transform;
body < height: 500vh; >div > span < position: fixed; right: 0; background: lightpink; >Элемент
div по центру экрана
Вариант, который работает почти во всех версиях браузеров.
#fixed < position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 2; text-align: center; background: rgba(0,0,0,.7); /* IE+9 */ > #fixed:before < /* IE+8 */ content: ""; display: inline-block; height: 100%; vertical-align: middle; > .fixedсодержание
- position: fixed; относительно своего родителя
- Зафиксировать div при прокрутке на CSS и/или JS
- Кнопка «Вверх» для сайта
- Lightbox на CSS
illyuziya Классно! А я всё думала, как «прилепляют» кнопочки и т.п. к краям экрана. Спасибо за «Шпаргалку. » — работа проделана колоссальная, а главное нужная. Анонимный Как сделать липкий слой чтобы находился рядом с основным блоком? NMitra Посмотрите, пожалуйста, возможные образцы.
Как зафиксировать слой, чтобы он оставался на одном месте при прокрутке страницы?
Задать положение блочного элемента, чтобы он всегда оставался на одном месте при прокрутке страницы.
Решение
«Замораживание» элемента в определённом месте веб-страницы происходит с помощью стилевого свойства position со значением fixed . При этом положение элемента не меняется даже при прокрутке страницы с помощью скроллинга. Сами координаты задаются через свойства left , right , top и bottom , которые соответственно определяют положение от левого, правого, верхнего и нижнего края окна браузера (пример 1).
Пример 1. Использование position
HTML5 CSS 2.1 IE Cr Op Sa Fx
Фиксированное меню .menu < position: fixed; /* Фиксированное положение */ right: 10px; /* Расстояние от правого края окна браузера */ top: 20%; /* Расстояние сверху */ padding: 10px; /* Поля вокруг текста */ background: #ffe; /* Цвет фона */ border: 1px solid #333; /* Параметры рамки */ >.text Результат данного примера показан на рис. 1. Обратите внимание, что положение элемента не меняется при прокрутке страницы вниз.
Рис. 1. Положение блока с меню
Как зафиксировать меню при прокрутке css
Чтобы зафиксировать меню при прокрутке страницы с помощью CSS, вы можете использовать свойство position и задать значение fixed для элемента меню.
Например, предположим, что у вас есть меню с классом menu и вы хотите зафиксировать его при прокрутке страницы. Вот пример CSS-кода, который можно использовать для достижения этой цели:
.menu position: fixed; top: 0; left: 0; width: 100%; > Здесь мы устанавливаем свойство position в значение fixed , чтобы зафиксировать меню на экране при прокрутке. Затем мы устанавливаем свойства top , left и width , чтобы разместить меню вверху страницы и растянуть его на всю ширину страницы.
Фиксация блока при прокрутке
Существует много различных плагинов, чтобы «залепить» блок на месте, когда страница прокручивается вниз. И некоторые из них, мягко говоря, ужасные и дергают страницу вверх в момент, когда блок меняет свою позицию на фиксированную.
«Залипание» блока можно сделать гораздо проще, воспользовавшись небольшим скриптом на jQuery или всего одним свойством на CSS
Вариант на CSS (position: sticky):
Для фиксации блока таким способом достаточно просто добавить нужному элементу свойство position: sticky
Такой элемент будет рассматриваться как относительно позиционированный до тех пор, пока родительский контейнер не пересечет указанный порог, в котором он прокручивается, после чего он обрабатывается как фиксированный до тех пор, пока не встретит противоположный край содержащего его блока. Другими словами этот элемент остается ограниченным родительским контейнером, в котором он находится.