Эта статья посвящена свойству position:fixed, которое не так часто используется вебмастерами. На это была причина. Данное свойство поддерживается в IE только начиная с версии 7, поэтому те разработчики, которые заботятся о кроссбраузерности, как правило, стараются избегать стилей неподдерживаемых в IE6.

С выходом IE7 количество пользователей предыдущей версии заметно сократилось, поэтому разработка сайта с использованием фиксированного позиционирования уже начала постепенно распространяться среди веб разработчиков.

Не многие знают, зачем и как можно использовать это свойство, поэтому сразу начнем с наглядного примера 1.

Спонсоры статьи: В Нижегородской области построят новые кирпичные заводы – подробности на информационном портале Betonmarket.ru
NFTV.ru – первый эротический интернет- канал рунета! Ведущие раздеваются до гола!
Многочисленные исследования в России за рубежом подтвердили, что ремни безопасности сохраняют жизнь.
Весь спектр компьютерных услуг в Волхове – компьютеры Волхов Сигма: ноутбуки, комплектующие, оргтехника, диски CD/DVD, программные продукты.
Xостинг H4W.RU использует профессиональные и уникальные технологии, возможностям которых, нет равных

CSS:

body{text-align:center;}
#outer{
width:600px;
margin:0 auto;
border:1px solid #000;
position:relative;
}
#side{
position:fixed;
background:red;
}

HTML:

<div id="outer">
<div id="side">Fixed Sidebar</div>
<p>scrolltest</p>
<p>scrolltest</p>
<p>scrolltest</p>
<p>scrolltest</p>
<!-- add more elements to test scrolling-->
</div>

Как вы видите, если прокрутить страницу вниз, красный блок #side остается на одном месте. Блок фиксирован относительно элемента #outer и всегда будет оставаться на экране.

Чуть усложним код:

CSS:

#side{
position:fixed;
background:red;
left:100px
}

Если мы укажем свойство left, блок уже не будет привязан к родительскому элементу, а будет располагаться относительно границ страницы. Поэтому, если вам необходимо изменить положение блока, не меняя его привязки к родительскоу элементу, используйте свойства margin, как в примере 3.

CSS:

#side{
position:fixed;
background:red;
margin-left:100px
}

Экспериментируем дальше. Допустим, перед нами стоит задача сделать фиксированный футер, причем относительно родительского элемента. Здесь использование только свойства bottom не приведен к нужному эффекту, т.к. футер просто прижмется к низу страницы.

Рассмотрим пример 2.

CSS:

#outer{
width:600px;
margin:auto;
border:1px solid #000;
position:relative;
overflow:auto;
}
#base{
position:absolute;
bottom:0;
left:0;
height:50px;
width:600px;
}
.inner{
position:fixed;
background:red;
width:600px;
height:50px;
}

HTML:

<div id="outer">
<p>scrolltest</p>
<p>scrolltest</p>
<p>scrolltest</p>
<p>scrolltest</p>
<p>scrolltest</p>
<p>scrolltest</p>
<p>scrolltest</p>
<p>scrolltest</p>
<p>scrolltest</p>
<p>scrolltest</p>
<p>scrolltest</p>
<p>scrolltest</p>
<p>scrolltest</p>
<!-- add more elements to test scrolling-->
<div id="base">
<div class="inner">Fixed base to centered element</div>
</div>
</div>

Здесь мы используем абсолютное позиционирование для привязки к элементу #outer, в который вставляем уже фиксированный элемент с bottom:0.
Но т.к. текста меньше чем может уместиться на странице, никакой разницы с обычным позиционированием мы не заметим, к тому же можно заметить баг: если уменьшить высоту страницы, блок с фиксированной позицией просто пропадает.
Поэтому переходим к примеру 3.

CSS:

*{margin:0;padding:0}/* quick and dirty reset for demo only - use a proper reset */
html,body{height:100%}
h1,p{margin:0 0 1em 0}
body{text-align:center;}
#outer{
width:600px;
min-height:100%;
margin:auto;
border:1px solid #000;
border-top:none;
border-bottom:none;
position:relative;
text-align:left;
}
* html #outer{height:100%}/* for ie6 and under who will just get an absolute footer instead */
#base{
position:fixed;
bottom:0;
height:50px;
width:600px;
background:red;
}
* html #base{/* for ie6 and under*/
position:absolute;
bottom:0;
left:0;
}
p.last{
padding-bottom:60px;/*make final text appear above footer */

HTML:

<div id="outer">
<h1>Fix your CSS</h1>
<p>A small example of using position:fixed in compliant browsers (not IE6 and under)</p>
<p>scrolltest</p>
<p>scrolltest</p>
<p>scrolltest</p>
<p>scrolltest</p>
<p>scrolltest</p>
<p>scrolltest</p>
<p>scrolltest</p>
<p>scrolltest</p>
<p class="last">scrolltest</p>
<!-- add more elements to test scrolling-->
<div id="base"> Fixed base to centered element</div>
</div>

Мы добавили высоту 100% для элементов body и html, чтобы прижать футер к низу. А чтобы текст не заезжал за блок, добавили внутренний отступ padding. Таким образом, теперь у нас есть футер, с центральным фиксированным позиционированием. Аналогичный эффект можно применить для меню и тогда пользователям не придется прокручивать страницу, чтобы добраться до навигации.

Для IE6 конечно тоже можно реализовать эффект фиксированного позиционирования, только для этого придется использовать не самые правильные способы:

<!--[if lte IE 6]>
<style type="text/css">
html{background:url(fake.gif) no-repeat 0 0}/* use a 1px x 1px transparent gif which cures the jitters on the footer when using this expression*/
#base {position: absolute;
top:expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop
+(documentElement.clientHeight-this.clientHeight)
: document.body.scrollTop
+(document.body.clientHeight-this.clientHeight));}
</style>
<![endif]-->

Вот такими нехитрыми способами можно реализовать фиксированное позиционирование блоков и применить его для любых элементов на сайте.