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

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

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

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

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

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

Следующая глава >

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

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

Из книги Язык программирования С# 2005 и платформа .NET 2.0. [3-е издание] автора Троелсен Эндрю

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


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

Из книги Microsoft Visual C++ и MFC. Программирование для Windows 95 и Windows NT автора Фролов Александр Вячеславович

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


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

Из книги Визуальное моделирование электронных схем в PSPICE автора Хайнеманн Роберт

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


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

Из книги CSS3 для веб-дизайнеров автора Сидерхолм Дэн

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


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

Из книги Продвижение бизнеса в ВКонтакте [Быстро и с минимальными затратами] автора Румянцев Дмитрий

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


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

Из книги HTML, XHTML и CSS на 100% автора Квинт Игорь

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


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

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

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