9.3. Схемы позиционирования.

В CSS2 блок может быть расположен в соответствии с тремя позиционными схемами:

1. Нормальное расположение (Normal flow). В CSS2 нормальное расположение включает блоковое форматирование блоков с блоками, строковое форматирование строковых блоков, относительное позиционирование блоковых или строковых блоков и позиционирование компактных и вставляемых (run-in) блоков.
2. Плавающее перемещение (Float). В модели плавающего смещения блок сначала располагается в соответствии с нормальным размещением, а затем смещается влево или вправо, на сколько это возможно. Содержание может смещаться вдоль сторон плавающего блока.
3. Абсолютное позиционирование (Absolute positioning). В модели абсолютного позиционирования блок смещается от нормального положения полностью (он не влияет на следующих за ним соседей) и ему присваивается позиция с учетом объемлющего блока.

Обратите внимание. Схемы позиционирования в CSS2 помогают авторам делать документы более доступными, позволяя избегать разметочные трюки (например, невидимые изображения), используемые для эффектов размещения.

9.3.1. Выбор схемы позиционирования: свойство 'position'.

Свойства 'position' и 'float' определяют, какие алгоритмы позиционирования в CSS2 используются для расчета положения блока.

'position'
Тип значения:       static | relative | absolute | fixed | inherit
Начальная величина: static
Применяется:        для всех элементов, но не 
                         для сгенерированного содержания
Наследование:       нет 
Процентная база:    нет
Медиа:              визуальные

Это свойства имеет следующие значения:

static

Блок является нормальным блоком, расположенным в соответствии с нормальным положением. Свойства 'left' и 'top' не применяются.

relative

Положение блока рассчитывается в соответствии с нормальным положением. Затем блок смещается относительно своего нормального положения. Когда блок B позиционируется относительно, то положение следующего блока рассчитывается таким образом, словно В не сместился.

absolute

Положение блока (и возможный размер) определяется свойствами 'left', 'right', 'top' и 'bottom'. Эти свойства определяют смещение с учетом объемлющего блока для данного блока. Блоки, позиционированные абсолютно, смещаются из нормального расположения. Это означает, что они не влияют на расположение последующих соседей. Дополнительно, хотя абсолютно позиционированные блоки имеют поля, они не сминаются с любыми другими полями.

fixed

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

@media screen { 
  H1#first { position: fixed } 
}
@media print { 
  H1#first { position: static }
}

9.3.2. Смещение блока: 'top', 'right', 'bottom', 'left'.

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

'top' 
Тип значения:    <length> | <percentage | auto | inherit
Начальная величина: auto
Применяется:        к позиционированным элементам
Наследование:       нет
Процентная база:    обращается к высоте объемлющего блока
Медиа:              визуальные

Это свойство определяет, как далеко верхний край блока с содержанием смещается ниже верхнего края объемлющего блока.

'right'
Тип значения:    <length> | <percentage | auto | inherit
Начальная величина: auto
Применяется:        к позиционированным элементам
Наследование:       нет
Процентная база:    обращается к ширине объемлющего блока
Медиа:              визуальные

Это свойство определяет, как далеко правый край блока с содержанием смещается налево от правого края объемлющего блока.

'bottom'
Тип значения:    <length> | <percentage | auto | inherit
Начальная величина: auto
Применяется:        к позиционированным элементам
Наследование:       нет
Процентная база:    обращается к высоте объемлющего блока
Медиа:              визуальные

Это свойство определяет, как далеко нижний край блока с содержанием смещается выше низа объемлющего блока.

'left'
Тип значения:    <length> | <percentage | auto | inherit
Начальная величина: auto
Применяется:        к позиционированным элементам
Наследование:       нет
Процентная база:    обращается к высоте объемлющего блока
Медиа:              визуальные

Это свойство определяет, как далеко левый край блока с содержанием смещается направо от левого края объемлющего блока.

Эти значения для четырех свойств имеют следующие значения:

<length>

Смещение является фиксированным расстоянием от опорного края.

<percentage>

Смещение является процентом от ширины объемлющего блока (для 'left' или 'right') или от высоты (для 'top' и 'bottom'). Для 'top' и 'bottom', если высота объемлющего блока не определена точно (т.е. зависит от высоты содержания), то процентное значение интерпретируется как 'auto'.

auto

Эффект этого значения зависит от того, какое из связанных свойств имеет значение 'auto'. Смотрите разделы по теме: "ширина и высота абсолютно позиционированных, не перемещаемых элементов".

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