2. Фиксированное позиционирование
Значение fixed, как и absolute, задаёт
элементу на экране абсолютные координаты. При этом смещения
отсчитываются от границ области просмотра (viewport). То есть при
прокрутке элемент сохраняет своё положение в окне.
На базе значения fixed можно построить, например,
навигационное меню, которое всегда остаётся под рукой пользователя.
Запишем соответствующий код HTML:
<BODY>
<DIV class="menu"> <!-- Меню, которое не должно скролироваться -->
<UL>
<LI>пункт 1
<LI>пункт 2
<LI>пункт 3
<LI>пункт 4
<LI>пункт 5
</UL>
</DIV>
<DIV class="content">
Длинное содержание страницы
</DIV>
</BODY>
|
Для блока content задан левый внешний отступ размером в
170 пикселов. Меню позиционировано в освободившееся пространство.
Так как для меню задано position:fixed, при прокрутке оно
сохранит своё положение в окне (не будет скролироваться вместе с содержимым).
|
Стилевые определения построим так:
BODY {margin:0; padding:0}
.menu
{
position:fixed;
width:150px;
top:10px; left:10px;
border: 1px solid black;
background:#fff2a6;
}
.content
{
margin: 10px 10px 10px 170px;
padding:10px;
border: 1px solid black;
background:#a7fbc0;
}
|
Если содержимое фиксированного блока выходит за пределы области
просмотра, оно становится недоступным читателю —
прокрутку для фиксированного блока включить нельзя.
При горизонтальной прокрутке контент может «подлезть»
под фиксированный блок и перекрыться им.
К сожалению, фиксированное позиционирование не поддерживают
браузеры IE до версии IE7 (здесь поддержка включена).