Элемент с position: fixed; фиксируется в рамках области просмотра страницы, будь то в окне браузера или в iframe, расстояние до края которой указано в свойствах top, right, bottom, left. Передвинуть его относительно своего расположения можно с помощью margin и transform. Размещение элемента над другими элементами правится с помощью свойства z-index.
После того, как свойство position примет значение fixed, размер элемента может измениться, а соседние элементы сдвинутся на освободившееся пространство.
«Приклеить» элемент, чтобы он не менял своего положения при прокрутке страницы
Элемент с position: fixed; не влияет на размер родителя.
<style>
div {
border: 1px solid red;
}
div:nth-of-type(2) {
margin-top: 1em;
}
span {
background: lightpink;
}
div:nth-of-type(2) span {
position: fixed;
}
</style>
<div>
<span>static</span>
</div>
<div>
<span>fixed</span>
</div>
Элемент с position: fixed; не влияет на положение соседей: цифры 20, 21, 22, … смещаются к цифре 19.
<style>
span {
background: rgba(255, 182, 193, .7);
}
span:nth-of-type(2) {
position: fixed;
}
</style>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <span>static</span> 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39<br>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <span>fixed</span> 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; не меняет своего положения при скроллинге.
<style>
body {
height: 500vh;
margin: 0;
padding: 0;
}
span {
height: 100%;
border: .5em solid fuchsia;
box-sizing: border-box;
background: lightpink;
}
.absolute {
position: absolute;
}
.fixed {
position: fixed;
margin-left: 5em;
}
</style>
<span class="absolute">absolute</span>
<span class="fixed">fixed</span>
При отсутствии свойств top, right, bottom, left элемент фиксируется на том месте окна браузера либо iframe, на котором находился до прокрутки. Его не увидеть, если он был ниже области, видимой без прокрутки.
<style>
body {
height: 500vh;
margin: 0;
padding: 0;
}
div {
height: 50vh;
}
div:nth-of-type(1) {
background: dodgerblue;
}
div:nth-of-type(2) {
margin-left: 4em;
background: blue;
}
div:nth-of-type(3) {
margin-left: 8em;
background: navy;
}
span {
position: fixed;
background: lightpink;
}
</style>
<div>
<span>fixed</span>
</div>
<div>
<span>fixed</span>
</div>
<div>
<span class="fixed"><!-- меня не видно!!! -->fixed</span>
</div>
Расположить элемент с position: fixed; относительно области просмотра окна браузера, iframe и т. п.
position: fixed;
Свойства top, right, bottom, left могут иметь как положительные, так и отрицательные значения в любых единицах измерения, а также в процентах. По умолчанию у них установлено значение auto.
<style>
body {
margin: 0;
padding: 3em;
}
span {
position: fixed;
background: lightpink;
}
span:nth-of-type(1) {
top: 0;
}
span:nth-of-type(2) {
right: 0;
}
span:nth-of-type(3) {
bottom: 0;
}
span:nth-of-type(4) {
left: 0;
}
</style>
<span>top</span>
<span>right</span>
<span>bottom</span>
<span>left</span>
<span>auto</span>
Значения свойств height, top и bottom в процентах рассчитываются от высоты области просмотра. Свойство height в процентах не заменяется на height: auto;, даже когда ближайший родитель имеет height: auto;. Значения свойств width, margin, padding, left и right в процентах рассчитываются от ширины области просмотра.
<style>
span {
position: fixed;
top: 50%;
left: 0;
height: 50%;
width: 50%;
background: lightpink;
}
</style>
<span></span>
Ширина и высота элемента с position: fixed; относительно области просмотра
Ширина элемента с position: fixed; без явно заданного значения устанавливается по содержимому. Элементы с display не block и position: fixed; ведут себя как элементы с display: block; и position: fixed;.
<style>
body {
height: 500vh;
}
div {
background: lightcyan;
}
span {
background: lightpink;
}
</style>
<div>Блочный</div>
<span>Строчный</span>Без явно заданной ширины и/или высоты размер элемента определяется расстоянием от left не auto до right не auto и/или от top не auto до bottom не auto (для IE8+).
<style>
.fixed {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: lightpink;
}
</style>
<div class="fixed">Элемент</div>Стили, чтобы растянуть блок на всю ширину и высоту области просмотра окна браузера, 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%;).
<style>
.fixed {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 30%;
height: 30%;
background: lightpink;
}
</style>
<div class="fixed">Элемент</div>position: fixed; и overflow не visible
Выходящая за границы родителя с overflow отличным от visible часть элемента с position: fixed; не будет скрыта. Даже если она выйдет за рамки области просмотра, горизонтальная или вертикальная полоса прокрутки не появится.
<style>
div {
overflow: hidden;
border: 1px solid red;
}
span {
position: fixed;
width: 100%;
border: .5em solid fuchsia;
background: lightpink;
}
</style>
<div>
<span>Элемент</span>
</div>
position: fixed; и clip-path или clip
Свойство clip не рекомендуется использовать, так как оно устарело. Ему на смену пришло clip-path. Элемент с position: fixed; не выходит за рамки родителя с одним из них.
<style>
/* серым выделено то, что нужно только для clip, так как он работает лишь совместно с position: absolute; */
body {
height: 500vh;
}
.parent {
position: relative;
height: 5em;
}
.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 {
background: lightpink;
}
</style>
<div class="fixed lightpink">Зафиксированный</div>
<div class="parent">
<div class="absolute">
<div class="fixed red">Зафиксированный</div>
</div>
</div>
position: fixed; не работает, когда у родителя свойства transform, perspective, filter или will-change имеют значение не none
Элемент с position: fixed; ведёт себя как элемент с position: absolute; относительно ближайшего родителя с transform, perspective, filter или will-change не none. Они создают новый контекст наложения. В браузерах разночтение.
<style>
body {
height: 500vh;
}
div {
border: 1px solid red;
}
span {
position: fixed;
right: 0;
background: lightpink;
}
<div>
<span>Элемент</span>
</div>div по центру экрана
Вариант, который работает почти во всех версиях браузеров.
<style>
#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 {
display: inline-block;
vertical-align: middle;
background: white;
}
</style>
<div id="fixed">
<div class="fixed">
содержание
</div>
</div>