Фиксированное позиционирование

Фиксированное позиционирование

Фиксированное позиционирование – разновидность абсолютного позиционирования. Единственным его отличием является то, что контейнер определяется областью просмотра. Для устройств без разбивки фиксированные блоки не перемещаются при прокрутке документа. В этом отношении они схожи с фиксированными фоновыми изображениями. Для устройств с постраничной разбивкой блоки с фиксированным положением повторяются на каждой странице. Это может оказаться удобным, например, при размещении подписей в нижней части каждой страницы.

Вы можете использовать фиксированное позиционирование для создания презентации в виде совокупности кадров. Рассмотрим один из примеров такой презентации, представленный на рис. 9.5.

Рис. 9.5. Фиксированное позиционирование

Подобного эффекта можно достичь с помощью HTML-кода и правил стиля, представленных в листинге 9.15.

Листинг 9.15. Создание кадров в CSS

<html>

<head>

<title>Глава 9. Создание кадров в CSS</title>

<style type="text/css">

body { height: 8.5in } /* будет использовано ниже для определения */

/* процентных соотношений, задающих значение */

/* высоты элемента */

#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>

Попробуйте нарисовать на листе бумаги свою разметку страницы, а потом создать ее, используя приобретенные навыки.

Данный текст является ознакомительным фрагментом.