-->

position: fixed; - как зафиксировать HTML-элемент в окне браузера

Элемент с 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 и т. п.

top
bottom
область просмотра
элемент
position: fixed;
left
right

Свойства 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>
в f t
наверх ↑

23 комментария:

Анонимный
Классно! А я всё думала, как "прилепляют" кнопочки и т.п. к краям экрана.
Спасибо за "Шпаргалку..." - работа проделана колоссальная, а главное нужная!!!
NMitra
Спасибо, приятно слышать!
Анонимный
Спасибо огромное 3 дня шапку пытался по центру сделать, просто через position:fixed
NMitra
Рада, что смогла быть полезной :)
Unknown
помогите.есть сайт шириной 990px мне надо в правом верхнем углу разместить телефон чтобы при прокрутке страницы вниз он оставался на месте.и чтобы при масштабировании он не выходил за ширину страницы
NMitra
И адрес сайта, где есть телефон. И тот телефон находится в теге с id
Unknown
вот у вас при масштабировании он не уходит за страницу .как этого добиться
NMitra
Размещаете в нужном месте странице по горизонтали (например, благодаря margin или transform) и не прописываете свойство left. А свойством top задаёте нужную высоту. Пример http://shpargalkablog.ru/2011/05/kak-sdelat-ssylku-k-nachalu-stranitsy.html
Unknown
спасибо .мешало right))сменил на margin все норм.помогли
Анонимный
Подскажите пожалуйста, а как можно зафиксировать картинку на заднем фоне, чтобы она не растягивалась на весь контент и создавалось впечатление что все остальное висит на прозрачном слое. Или это сюда не относится?
NMitra
Я не совсем поняла:
Для фоновой картинки http://shpargalkablog.ru/2011/08/fon-dlya-saita-html.html
Для размера изображения http://shpargalkablog.ru/2011/03/pochemu-uhudshaetsya-foto-pri.html (стили могут быть прописаны и отдельно для тега img)
Unknown
Спасибо, очень помогли
Анонимный
СПАСИБО огромное, немножко переделал, подстроил под себя, вообще красота:))
Анонимный
как сделать липкий слой чтобы находился рядом с основным блоком
NMitra
Вёрстку посмотрите тут http://shpargalkablog.ru/2012/09/rezinovyi-sajt.html#plavayushaya (нажмите кнопку "Активизировать", чтобы посмотреть пример) или стили для кнопки "Наверх" http://shpargalkablog.ru/2011/05/kak-sdelat-ssylku-k-nachalu-stranitsy.html
Анонимный
Подскажите пожалуйста, ломаю голову. Как зафиксировать плеер на странице, чтоб при переходе на другую страницу, плеер оставался играть. помогите пожалуйста!!!
NMitra
В плеере должны быть прописаны куки или sessionStorage ( примеры не по плееру, то принцип должен быть понятен http://shpargalkablog.ru/2013/06/localStorage.html )
Анонимный
не разобрался, не могли бы вы написать код который нужно вставить в страницу чтобы вот так получилось как на сайте http://www.mp3poisk.net/artists/imany плеер внизу. и при переходе остаеться играть
Анонимный
вот эта ссылка чтоб играла -- http://radiostrfm.no-ip.biz:8000/live
NMitra
Извините, это довольно трудоёмко. Я учту ваше пожелание, но сомневаюсь, что реализую его в ближайшее время, см. http://shpargalkablog.ru/p/comments-blog.html
Анонимный
И на том спасибо большое!
Konstantin
Добрый день, у Вас очень живой (судя по отзывам), информативный а главное полезный сайт.. Спасибо, что делаете интернет лучше ))
Позволю и себе, задать вопрос ...)
У нас на сайте есть боковое меню, я хочу сделать его position:fixed, что бы оно стояло на месте при прокрутке страницы.
Но при этом меню должно быть прижато справа к основному контенту. При этом, сайт резиновый с фиксированными
max-width: 1600px;
min-width: 960px;
И у меня ни как не получается это сделать.. ?? Может быть подскажете решение...
Благодарю за ответ..
NMitra
Добрый день, с помощью margin, как тут http://shpargalkablog.ru/2011/05/kak-sdelat-ssylku-k-nachalu-stranitsy.html
Ещё посмотрите это http://shpargalkablog.ru/2013/09/scroll-block.html

Извините, комментарии в рамках данной статьи не предусмотрены.