|
||
|
aranea.ru || Спецификация CSS2 | 9.6. Абсолютное позиционирование.
9.6. Абсолютное позиционирование.9.6.1. Фиксированное позиционирование.В модели абсолютного позиционирования блок смещается с учетом своего объемлющего блока. Он полностью смещается из нормального расположения (блок не имеет воздействия на соседей, следующих за ним). Абсолютно позиционированный блок учреждает новый объемлющий блок для дочерних блоков с нормальным расположением и для позиционированных потомков. Однако, содержание абсолютно позиционированного элемента не смещается в других блоках. Они могут прятать или нет содержание другого блока, в зависимости от уровня слоя перекрывающихся блоков. Предпочтения в этих спецификациях для абсолютно позиционированного элемента (или его блока) подразумевают, что свойство элемента 'position' имеет значение 'absolute' или 'fixed'. 9.6.1. Фиксированное позиционирование.Фиксированное позиционирование является подкатегорией абсолютного позиционирования. Единственное различие состоит в том, что для фиксированного позиционирования объемлющий блок учреждается демонстрационным окном. Для медиа с непрерывным отображением фиксированные блоки не двигаются, когда осуществляется скроллинг документа. В связи с этим, они похожи на фиксированные иллюстрации фона. Для медиа с постраничным отображением блоки с фиксированными позициями повторяются на каждой странице. Это полезно для помещения, например, подписи внизу каждой страницы. Авторы могут использовать фиксированное позиционирование для создания фрейм-подобных презентаций. Рассмотрим следующую компоновку фреймов:  [D]Это можно достичь с помощью следующих HTML-документа и стилевых правил:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>A frame document with CSS2</TITLE>
<STYLE type="text/css">
BODY { height: 8.5in } /* Required for percentage heights below */
#header {
position: fixed;
width: 100%;
height: 15%;
top: 0;
right: 0;
bottom: auto;
left: 0;
}
#sidebar {
position: fixed;
width: 10em;
height: auto;
top: 15%;
right: auto;
bottom: 100px;
left: 0;
}
#main {
position: fixed;
width: auto;
height: auto;
top: 15%;
right: 0;
bottom: 100px;
left: 10em;
}
#footer {
position: fixed;
width: 100%;
height: 100px;
top: auto;
right: 0;
bottom: 0;
left: 0;
}
</STYLE>
</HEAD>
<BODY>
<DIV id="header"> ... </DIV>
<DIV id="sidebar"> ... </DIV>
<DIV id="main"> ... </DIV>
<DIV id="footer"> ... </DIV>
</BODY>
</HTML>
|
