Эта статья посвящена свойству position:fixed, которое не так часто используется вебмастерами. На это была причина. Данное свойство поддерживается в IE только начиная с версии 7, поэтому те разработчики, которые заботятся о кроссбраузерности, как правило, стараются избегать стилей неподдерживаемых в IE6.
С выходом IE7 количество пользователей предыдущей версии заметно сократилось, поэтому разработка сайта с использованием фиксированного позиционирования уже начала постепенно распространяться среди веб разработчиков.
Не многие знают, зачем и как можно использовать это свойство, поэтому сразу начнем с наглядного .
Спонсоры статьи: В Нижегородской области построят новые кирпичные заводы - подробности на информационном портале 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 не приведен к нужному эффекту, т.к. футер просто прижмется к низу страницы.
Рассмотрим .
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.
Но т.к. текста меньше чем может уместиться на странице, никакой разницы с обычным позиционированием мы не заметим, к тому же можно заметить баг: если уменьшить высоту страницы, блок с фиксированной позицией просто пропадает.
Поэтому переходим к .
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. Таким образом, теперь у нас есть футер, с центральным фиксированным позиционированием. Аналогичный эффект можно применить для меню и тогда пользователям не придется прокручивать страницу, чтобы добраться до навигации.
конечно тоже можно реализовать эффект фиксированного позиционирования, только для этого придется использовать не самые правильные способы:
<!--[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]--> Вот такими нехитрыми способами можно реализовать фиксированное позиционирование блоков и применить его для любых элементов на сайте.
