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

Для того, чтобы зафиксировать HTML-элемент в окне браузера, нужно использовать position: fixed;. При этом блок "приклеивается" и не меняет своего положения на мониторе при прокрутке страницы. А другие рядом стоящие элементы занимают его место. Обратите внимание, что при наличии первого флажка текст ниже приближается к кнопкам.

position: fixed; top bottom left right
margin transform z-index
width: auto; width: 100%; width: 200px;
блочный встроенный
<style type="text/css">
.primer {
  border: 4px solid #456;
  background: #fff;  position: fixed;  margin: -200px 40px 200px -40px;  -moz-transform: translate(-70px, -300px);
  -webkit-transform: translate(-70px, -300px);
  -o-transform: translate(-70px, -300px);
  -ms-transform: translate(-70px, -300px);  z-index: 101;  width: 100%;  width: 200px;  top: 0%;  bottom: 0%;  right: 0%;  left: 0%;}
</style>

<div class="primer"></div><span class="primer"></span>

Элемент будет скрываться за другим, если

  1. у того задано свойство position, отличное от static,
  2. тот в коде находится ниже или z-index его выше.
Активируем флажок "position: fixed;" - серый блок при пересечении с белым находится над ним, а при нажатии и на кнопку "z-index" будет им накрыт.

<style type="text/css">
.primer2 {
  border: 4px solid #087e11;
  width: 200px;
  background: #e1e1e1;
  position: relative;}
</style>

<div class="primer2"></div>

Четыре свойства CSS определяют положение элемента: left, top, right и bottom. Отсчёт в данном случае ведётся от края монитора. Это стоит учитывать, поскольку есть пользователи, у которых разрешение экрана 2560x1600 и при неправильном использовании ваши кнопки, формы и т.п. будут ютиться далеко от основного содержания сайта. Если одновременно задать значения для параллельных сторон, например, top и bottom, то блок растянется на всю высоту между этими двумя точками. Исключением будет ситуация, когда высота фиксирована. Тогда bottom будет проигнорирован.

Есть ещё два свойства, которые учитываются - это margin и transform. Поставьте галочки "position: fixed;", "margin", "top" в примере и вы увидите, что элемент исчез. Но это не так, он просто вышел за пределы окна браузера. Если добавить четвертую галку "bottom", то можно в этом убедиться, увидев "хвост" блока.

Зафиксировать можно и блочный, и встроенный элемент, который ведёт себя также как при position: absolute. А именно любой элемент теперь будет обладать шириной согласно длины содержимого, если width не задана (находится в значении auto), либо согласно установленному значению. width: 100% - это ширина окна браузера + border и padding элемента.

Как разместить плавающий блок рядом с родительским, выровненным по центру (margin: 0 auto;)

У кнопки "Наверх" в стилях CSS применён этот метод. Расположение по горизонтали мы определили благодаря margin, а по вертикали - top.

<style type="text/css">
.main {
  margin: 0 auto;
  width: 600px;
  height: 2000px;  /* для появления скролла */ 
}

.fixed {
  position: fixed;
  top: 0%;
  margin: 0px -600px 0px 600px;
}
</style>

<body>
  <div class="main">
    <div id="fixed">содержание</div>
  </div>
</body>

div по центру экрана

Воедино сложим две статьи: горизонтальное и вертикальное выравнивание.

<style type="text/css">
#fixed {
  display: table;
  height: 100%;
  width: 100%;
  z-index: 20;
  position: fixed;
  top: 0%;
  left: 0%;}

.fixed {
  vertical-align: middle;
  display: table-cell;
  text-align: center;
}
</style>

<div id="fixed">
  <div class="fixed">
    содержание
  </div>
</div>

Вот и получилось модальное окно. Добавим кнопку, которая будет скрывать/показывать блок. Пример (вместе с сочетанием с формой обратной связи от line25.com).

<style type="text/css">
#fixed {
  display: none;  
  height: 100%;
  width: 100%;
  z-index: 1000;
  position: fixed;
  top: 0%;
  left: 0%;
  background: rgba(0, 0, 0, 0.7);
}

.fixed {
  vertical-align: middle;
  display: table-cell;
  font: normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
  text-indent: 0px;
} 

#contact, #contact form, #contact fieldset {
 margin: 0; padding: 0; border: 0; outline: none;
}

#contact {
  width: 430px;
  margin: 0px auto; padding: 60px 30px;
  background: #c9d0de;
  border: 1px solid #e1e1e1;
  border: 1px solid #fff;
  position: relative;
}

#contact a.close {
  position: absolute; right: 10px; top: 10px;
  text-decoration: none;
  font-size: 20px; text-shadow: 0px 1px 0px #f2f2f2;
}

#contact p {
  font-size: 35px; font-weight: bold;
  color: #445668; text-shadow: 0px 1px 0px #f2f2f2;
  text-align: center;
  margin: 0 0 35px 0;
}

#contact label {
  float: left;
  margin: 11px 20px 0 0;
  width: 92px;
  text-align: right;
  font-size: 16px;
  color: #445668; text-shadow: 0px 1px 0px #f2f2f2;
}

#contact input, #contact textarea {
  border: 0; outline: none;
  margin: 0 0 20px 0;
  background: #5E768D;
  background: -moz-linear-gradient(#546A7F 0%, #5E768D 20%);
  background: -ms-linear-gradient(#546A7F 0%, #5E768D 20%);
  background: -o-linear-gradient(#546A7F 0%, #5E768D 20%);
  background: -webkit-linear-gradient(#546A7F 0%, #5E768D 20%);
  border-radius: 5px;
  box-shadow: 0px 1px 0px #f2f2f2;
  font-family: sans-serif; font-size: 16px;
  color: #f2f2f2; text-shadow: 0px -1px 0px #334f71;
}

#contact input:-moz-placeholder, #contact textarea:-moz-placeholder { color: #a1b2c3; text-shadow: 0px -1px 0px #38506b; }
#contact input::-webkit-input-placeholder, #contact textarea::-webkit-input-placeholder { color: #a1b2c3; text-shadow: 0px -1px 0px #38506b; }
#contact input:-ms-input-placeholder, #contact textarea:-ms-input-placeholder { color: #a1b2c3; text-shadow: 0px -1px 0px #38506b; }

#contact input {
  width: 263px; height: 35px; line-height: 35px;
  padding: 0px 20px;
}

#contact textarea {
  width: 280px; height: 170px;
  padding: 12px 0 0px 20px; 
  overflow: auto;
}

#contact input:focus, #contact textarea:focus {
  background: #728eaa;
  background: -moz-linear-gradient(#668099 0%, #728eaa 20%);
  background: -ms-linear-gradient(#668099 0%, #728eaa 20%);
  background: -o-linear-gradient(#668099 0%, #728eaa 20%);
  background: -webkit-linear-gradient(#668099 0%, #728eaa 20%);
}

#contact input[type=submit] {
  width: 185px;
  height: 52px;
  float: right;
  padding: 10px 15px; margin: 0 15px 0 0;
  box-shadow: 0px 0px 5px #999;
  border: 1px solid #556f8c;
  background: -moz-linear-gradient(#718DA9, #415D79);
  background: -ms-linear-gradient(#718DA9, #415D79);
  background: -o-linear-gradient(#718DA9, #415D79);
  background: -webkit-linear-gradient(#718DA9, #415D79);
  cursor: pointer;
}
</style>

<a href="javascript:void(0)" onclick="document.getElementById('fixed').style.display='table'">ссылка</a>

<div id="fixed">
  <div class="fixed">
    <div id="contact">
      <a href="javascript:void(0)" onclick="document.getElementById('fixed').style.display='none'" class="close" title="Закрыть форму">✖</a>
      <p>ФОРМА ДЛЯ СВЯЗИ</p>
      <form action="#" method="post">
        <fieldset>
          <label for="name">Ф.И.О.:</label><input type="text" id="name" placeholder="Иванов Иван Иванович"/>
          <label for="email">Email:</label><input type="email" id="email" placeholder="n.mitra@yandex.ru"/>
          <label for="message">Сообщение:</label><textarea id="message" placeholder="Текст вопроса" style="width: 395px;"></textarea><input type="submit" value="Отправить" />
        </fieldset>
      </form>
    </div>
  </div>
</div>

ФОРМА ДЛЯ СВЯЗИ



Похожие материалы http://shpargalkablog.ru/2016/02/right-align.html
в f t
наверх ↑

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

illyuziya
Классно! А я всё думала, как "прилепляют" кнопочки и т.п. к краям экрана.
Спасибо за "Шпаргалку..." - работа проделана колоссальная, а главное нужная!!!
NMitra
Спасибо, приятно слышать!
Анонимный
Спасибо огромное 3 дня шапку пытался по центру сделать, просто через position:fixed
NMitra
Рада, что смогла быть полезной :)
Михаил Гоголев
помогите.есть сайт шириной 990px мне надо в правом верхнем углу разместить телефон чтобы при прокрутке страницы вниз он оставался на месте.и чтобы при масштабировании он не выходил за ширину страницы
NMitra
И адрес сайта, где есть телефон. И тот телефон находится в теге с id
Михаил Гоголев
вот у вас при масштабировании он не уходит за страницу .как этого добиться
NMitra
Размещаете в нужном месте странице по горизонтали (например, благодаря margin или transform) и не прописываете свойство left. А свойством top задаёте нужную высоту. Пример http://shpargalkablog.ru/2011/05/kak-sdelat-ssylku-k-nachalu-stranitsy.html
Михаил Гоголев
спасибо .мешало right))сменил на margin все норм.помогли
Анонимный
Подскажите пожалуйста, а как можно зафиксировать картинку на заднем фоне, чтобы она не растягивалась на весь контент и создавалось впечатление что все остальное висит на прозрачном слое. Или это сюда не относится?
NMitra
Я не совсем поняла:
Для фоновой картинки http://shpargalkablog.ru/2011/08/fon-dlya-saita-html.html
Для размера изображения http://shpargalkablog.ru/2011/03/pochemu-uhudshaetsya-foto-pri.html (стили могут быть прописаны и отдельно для тега img)
Владимир Москаленко
Спасибо, очень помогли
Анонимный
СПАСИБО огромное, немножко переделал, подстроил под себя, вообще красота:))
Анонимный
как сделать липкий слой чтобы находился рядом с основным блоком
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