BODY { display: block; line-height: 200%;
width: 400px; height: 400px }
P { display: block }
SPAN { display: inline }
Окончательные позиции боксов, генерируемых внешними и внутренними элементами, различны в каждом примере. В каждой иллюстрации числа слева от иллюстрации обозначают позицию нормального позиционирования строк. (Примечание: иллюстрации используют различные горизонтальные и вертикальные масштабы.)
Рассмотрим следующие объявления CSS для
#outer { color: red }
#inner { color: blue }
Элемент P содержит всё инлайн-содержимое:
Чтобы увидеть действие относительного позиционирования, мы специфицируем:
#outer { position: relative; top: -12px; color: red }
#inner { position: relative; top: 12px; color: blue }
Текст расположен нормально до элемента
Содержание
Обратите внимание, что на содержимое, следующее после
Заметьте также, что, имея смещение для
Теперь рассмотрим эффект от всплывания текста элемента
#outer { color: red }
#inner { float: right; width: 130px; color: blue }
Текст нормально расположен до бокса
Чтобы увидеть действие свойства
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 { float: right; width: 130px; color: blue }
#sibling { clear: right; color: red }
Наконец, мы рассмотрим действие абсолютного позиционирования. Вот объявления CSS для
#outer {
position: absolute;
top: 200px; left: 200px;
width: 200px;
color: red;
}
#inner { color: blue }
которые позиционируют верх бокса
#outer {
position: relative;
color: red
}
#inner {
position: absolute;
top: 200px; left: -100px;
height: 130px; width: 130px;
color: blue;
}
В результате получится примерно так:
Если мы не позиционируем бокс outer:
