• absolute – положение блока (возможно, и размер) указывается свойствами left, right, top и bottom. Они определяют величину смещения относительно контейнера блока. Абсолютно позиционируемые блоки изымаются из нормального потока. Это значит, что они не влияют на размещение последующих сестринских элементов. Следует заметить, что поля абсолютно позиционируемых блоков не перекрываются никакими другими полями.

• fixed – положение блока рассчитывается в соответствии с моделью абсолютного позиционирования, а затем он фиксируется относительно некоторого объекта. При использовании устройств без разбивки блок фиксируется относительно области просмотра (и не перемещается при прокрутке). При использовании устройств с постраничной разбивкой блок фиксируется относительно страницы, даже если она отображается в области просмотра (например, при предварительном просмотре печати). Вы также имеете возможность сделать определение значения fixed аппаратно-зависимым. Например, вы можете сделать так, чтобы на экране блок всегда отображался в верхней части области просмотра, но на печатной странице этого бы не происходило. Два объявления могут быть отделены друг от друга с помощью правила @media, как это показано на примере ниже:

@media screen {

h1#first { position: fixed }

}

@media print {

h1#first { position: static }

}

Говорится, что элементу была присвоена позиция, если для свойства position устанавливается значение, отличное от static. Позиционированные элементы порождают позиционированные блоки, положение которых регулируется с помощью следующих четырех свойств.

• top – задает смещение верхнего сегмента внутренней краевой линии относительно верхнего сегмента краевой линии контейнера блока.

• right – определяет смещение правого сегмента внутренней краевой линии влево относительно правого сегмента краевой линии контейнера блока.

• bottom – задает смещение нижнего сегмента внутренней краевой линии вверх относительно нижнего сегмента краевой линии контейнера блока.

• left – определяет смещение левого сегмента внутренней краевой линии вправо относительно левого сегмента краевой линии контейнера блока.

Значения этих четырех свойств имеют следующий смысл.

• «длина» – смещение задается фиксированным значением расстояния от исходной краевой линии.

• «проценты» – смещение задается процентным соотношением относительно ширины (для свойств left и right) или высоты (для свойств top и bottom) контейнера. Если высота контейнера не указана точно, то есть зависит от высоты содержимого, то процентное соотношение, определяющее значение свойств top и bottom, интерпретируется как значение auto.

• auto – результат данного значения зависит от того, какие из свойств, близких по своему содержанию к рассматриваемым, также имеют значение auto.

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

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

• left – элемент порождает структурный блок, перемещаемый влево. Содержимое выводится вдоль правой стороны блока, начиная с самого верха (за счет свойства clear). Свойство display игнорируется, если ему не присвоено значение none.

• right – подобно значению left с той лишь разницей, что содержимое выводится вдоль левой стороны блока, начиная с самого верха.

• none – блок не перемещается.

Следующее правило перемещает все блоки, порожденные элементом IMG с атрибутом class="icon", влево и устанавливает значение ширины поля равным нулю:

IMG.icon {

float: left;

margin-left: 0;

}

Рассмотрим исходный HTML-документ и таблицу стилей на примере из листинга 9.14.

<html>

<head>

<title>Глава 9. Пример перемещаемого объекта</title>

<style type="text/css">

img { float: left }

body, p, img { margin: 2em }

</style>

</head>

<body>

<img src="img.gif" alt="Данный рисунок иллюстрирует перемещаемые объекты">

Пример текста, у которого нет другого...

</body>

</html>

Блок, порожденный элементом IMG, перемещается влево. Следующее за ним содержимое форматируется справа от него, начиная с той же строки, на которой находится он сам. Присутствие перемещаемого объекта влияет на то, что, пока линейные блоки находятся справа от него, они укорачиваются, но как только они достигают его конца, сразу восстанавливают свою исходную ширину (равную ширине контейнера, назначенного элементом P). Приведенный документ может быть отформатирован следующим образом: