Приложение 1: 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>

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

у того задано свойство position, отличное от static,
тот в коде находится ниже или 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 http://stackoverflow.com/questions/12463658/parent-child-with-position-fixed-parent-overflowhidden-bug/23859719