Спецификация CSS2

BODY { display: block; line-height: 200%; width: 400px; height: 400px } P { display: block } SPAN { display: inline }

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

Рассмотрим следующие объявления CSS для outer и inner, которые не изменяют нормального расположения боксов:

#outer { color: red } #inner { color: blue }

Элемент P содержит всё инлайн-содержимое: анонимный инлайн-текст и два элемента SPAN. Следовательно, всё содержимое будет расположено вне инлайн-контекста форматирования внутри содержащего блока, устанавливаемого элементом P, и получится что-то подобное:

[D]

Чтобы увидеть действие относительного позиционирования, мы специфицируем:

#outer { position: relative; top: -12px; color: red } #inner { position: relative; top: 12px; color: blue }

Текст расположен нормально до элемента outer. Текст outerзатем всплывает в своей нормальной позиции и размерах в конце строки 1. Затем инлайн-боксы, содержащие текст (распределённый на три строки), сдвигаются вместе на '-12px' (вверх).

Содержание inner как дочернего от outer было бы нормально расположено сразу после слов "of outer contents" (на строке 1.5). Однако содержимое innerсамо смещено относительно содержимого outer на '12px' (вниз), обратно на свою первоначальную позицию на строке 2.

Обратите внимание, что на содержимое, следующее после outer, Относительное позиционирование outer не влияет.

[D]

Заметьте также, что, имея смещение для outer '-24px', текст outer и текст тела могут быть перекрыты.

Теперь рассмотрим эффект от всплывания текста элемента inner вправо при использовании следующих правил:

#outer { color: red } #inner { float: right; width: 130px; color: blue }

Текст нормально расположен до бокса inner, который вытолкнут из расположения и всплыл к правому полю (его 'width' установлено явно). Строчные боксы слева от поплавка укорочены, и оставшийся текст документа всплывает в них.

[D]

Чтобы увидеть действие свойства 'clear', мы добавим в пример родственные элементы:

Сравнение схем позиционирования II

Beginning of body contents. Start of outer contents. Inner contents. Sibling contents. End of outer contents. End of body contents.

Следующие правила:

#inner { float: right; width: 130px; color: blue } #sibling { color: red }

заставляют бокс inner всплывать вправо, как и раньше, а остальной текст документа - всплывать в незанятом пространстве:

[D]

Однако, если свойство 'clear' родственного элемента установлено в 'right' (т.е. генерируемый родственный бокс не займёт позицию справа от всплывающего бокса), родственное содержимое начнёт располагаться ниже поплавка:

#inner { float: right; width: 130px; color: blue } #sibling { clear: right; color: red }

[D]

Наконец, мы рассмотрим действие абсолютного позиционирования. Вот объявления CSS для outer и inner:

#outer { position: absolute; top: 200px; left: 200px; width: 200px; color: red; } #inner { color: blue }

которые позиционируют верх бокса outer относительно его содержащего блока. Содержащий блок для позиционируемого бокса устанавливается ближайшим позиционированным предком (или, если таковой не существует, начальным содержащим блоком, как в нашем примере). Верхняя сторона бокса outer на '200px' ниже верха содержащего блока, а левая сторона - на '200px' от левой стороны. Дочерний бокс outer'а позиционирован нормально относительно родителя.

[D]

#outer { position: relative; color: red } #inner { position: absolute; top: 200px; left: -100px; height: 130px; width: 130px; color: blue; }

В результате получится примерно так:

[D]

Если мы не позиционируем бокс outer: