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

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

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

Вы можете использовать фиксированное позиционирование для создания презентации в виде совокупности кадров. Рассмотрим один из примеров такой презентации, представленный на рис. 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>

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

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



Поделитесь на страничке

Похожие главы из других книг:

Перспектива: масштабирование и позиционирование

Из книги автора

Перспектива: масштабирование и позиционирование С газонокосилкой мы сделаем две вещи:1) увеличим ее с помощью преобразования;2) сдвинем ее вниз и вправо.Эти два изменения в сочетании с переходом создадут эффект приближения газонокосилки в сторону зрителя


Позиционирование перемещаемого объекта

Из книги автора

Позиционирование перемещаемого объекта Перемещаемый объект – это блок, который смещается по строке в левую или правую сторону. Свойство float определяет, будет ли блок перемещен влево, вправо или вообще не будет перемещен. Оно может устанавливаться для элементов,


Глава 8. Позиционирование сообщества

Из книги автора

Глава 8. Позиционирование сообщества Прежде чем начать продвижение сообщества в ВКонтакте, нужно определиться, для решения каких задач вы его создаете и как будете позиционировать.Основных способов позиционирования сообщества три:1) позиционирование по


1.1. Поиск и позиционирование компонентов

Из книги автора

1.1. Поиск и позиционирование компонентов Прежде чем приступить к работе, вам необходимо запустить редактор автоматизированного проектирования электросхем SCHEMATICS из Windows 95/98/NT. На рис. 1.1 показан стартовый экран Windows 95/98/NT с указанием пути к редактору проектирования


15.2. Поиск, позиционирование и проводной монтаж компонентов

Из книги автора

15.2. Поиск, позиционирование и проводной монтаж компонентов По ходу изучения этого раздела вы будете чертить схему, изображенную на рис. 9.13, и убедитесь в том, что редакторы CAPTURE и SCHEMATICS практически не отличаются друг от друга по своим функциям.Шаг 8 Активизируйте окно


Динамическое позиционирование элементов управления Windows Forms

Из книги автора

Динамическое позиционирование элементов управления Windows Forms Чтобы завершить эту главу, давайте рассмотрим несколько подходов, которые можно использовать для управления размещением элементов управления в форме. Если при создании типа Form вы предполагаете, что элементы


Позиционирование

Из книги автора

Позиционирование Чтобы переместить указатель текущей позиции файла в новое положение, можно воспользоваться одним из следующих методов класса CFile – Seek, SeekToBegin, SeekToEnd. В состав класса CFile также входят методы, позволяющие установить и изменить длину файла – GetLength,