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

Итак, мы при верстке добиваемся необходимого расположения графических и текстовых элементов на странице. Средства HTML для этих целей: таблицы (со всеми их выравниваниями, ширинами и проч.), а также невидимые однопиксельные гифы. Вроде бы все. Этим набором HTML исчерпывается. Главная наша цель - полностью перейти к позиционированию с помощью CSS. То есть употреблять тэг TABLE только для табличной информации, а об однопиксельных гифах забыть вовсе.

В спецификации CSS2 говорится о трех схемах позиционирования:

1. Нормальный поток
2. Плавающая модель
3. Абсолютное позиционирование

Нормальный поток

По сути дела, используется браузерами в настоящее время для отображения HTML-страницы. В нем все очень привычно. Блоковые элементы начинаются с новой строки, то есть они располагаются вертикально друг за другом. Расстояние между блоковыми элементами определяется полями (margin). Выравниваются они по какому-нибудь краю контейнера (то есть родительского элемента).

Строковые элементы располагаются непосредственно друг за другом, то есть горизонтально. А вот с расстояниями все гораздо сложнее. Скажем, в MSIE 5 нельзя применять для строковых элементов свойства margin и padding (просто не будет никакого эффекта). Кстати, нормальный поток можно задать свойством position: static.

Вот типичный образец нормального потока:

К нормальному потоку можно отнести и Относительное позиционирование. Что это такое. Представьте себе, что есть три блока. Ну вот хотя бы такой код:

<P style="">первый блок</P>
<P style="border: 1px solid black">второй блок блок</P>
<P style="border: 1px solid black">третий блок</P>

Вот так это бует выглядеть.

первый блок

второй блок блок

третий блок

А сейчас второй блок будет относительно позиционирован:

<P style="border: 1px solid black">первый блок</P>
<P style="border: 1px solid black; position: relative; top: 30px">второй блок блок</P>
<P style="border: 1px solid black">третий блок</P>


первый блок

второй блок блок

третий блок

Мы видим, что второй блок сместился относительно первого на 30 пикселей, но при этом положение третьего блока не изменилось, вследствие чего произошло наложение второго и третьего блоков. То есть относительное позиционирование отдельного блока не влияет на все остальные блоки.

Особо ничего полезного относительное позиционирование не дает. Можно делать нижние и верхние индексы (аналог тэгов <SUP> и <SUB>), хотя такой способ и более громоздкий, но зато несколько более гибкий. Если надо сделать отступы поменьше, то тоже можно использовать. В общем-то и все. Хотя еще может пригодиться при абсолютном позиционировании, но как именно, позже расскажу. Сделать блок относительно позиционированным можно свойством position: relative.

Впрочем, нам нормальный поток неинтересен, потому как ничего более-менее приличного на его основе не сверстаешь. Вернее, можно сверстать страничку в одну колонку, но кроме как для веб-лога это нигде больше и не применишь. В этом легко убедиться. Представьте себе, что из языка HTML исчезли таблицы. Ну вот нет тэга TABLE и все тут. Представили? Страшно? ;) М-да, действительно невеселая картина. Так что оставим нормальный поток кому-нибудь в наследство, а сами перейдем к Плавающей модели.

Плавающая модель

Эта модель намного для нас интереснее и полезней, потому как служит прямым средством для замены табличной верстки. Вот вкратце как она работает. Элемент сначала позиционируется как в нормальном потоке, потом изымается из него и прибивается или к левому краю контейнера, или к правому краю контейнера. К какому именно краю, задается свойством float: left|right.

Вот простенький пример:

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

Скриншоты тут ни к чему. Ура! Потому что все выглядит одинаково в Opera 5, Mozilla 0.9.1, MSIE 6, Netscape 6.

Если не указать ширину плавающего блока, то он займет столько места, сколько в нем контента. Вот так:

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

Если бы в строчке "это блок, прибитый влево. Ширину указать забыли..." было еще одно слово, то плавающий блок растянулся бы на все доступные ему 450px (это ширина внешнего контейнера), а обтекающий текст расположился бы ниже.

Как вы, должно быть, заметили в первом примере, новый абзац "Скриншоты тут ни к чему..." начинается после плавающего блока, хотя должен бы по идее обтекать справа. Это реализуется свойством clear: left|right. В данном случае используется

<P style="clear:left">...

Clear:left говорит браузеру о том, что этот блок не может своей левой стороной прилегать к предыдущему плавающему блоку. Поэтому браузеру ничего не остается, как отобразить его после плавающего блока.

В самых общих чертах это и есть плавающая модель. Сейчас приведем пару более сложных примеров.

Вот три блока. У всех свойство float: left. На основе этого уже можно что-нибудь сверстать. Однако в таком случае придется пристально следить за шириной контента. Вот, допустим, будет в среднем блоке длинное слово, и...

И все поедет в Explorer'е. А вот в Opera 5 и Mozilla не поедет, а содержимое блоков перекроется. Вот так:

Верстать сайты на основе плавающей модели можно, но это требует определенных моральных усилий, поскольку браузеры иногда ведут себя так, что очень хочется кого-нибудь ударить или поиграться в Quake 3 минут 20-30 для снятия стресса.

Абсолютное позиционирование

Если в плавающей модели блок лишь сдвигался относительно контейнера влево-вправо, то здесь блок полностью изымается из нормального потока и ему задается однозначное положение относительно контейнера. Вот пример.

Левый блок смещен относительно контейнера (относительно позиционированного верхнего блока) на 10px вниз и на 155px влево. А вот если бы мы не указали в контейнере position: relative, то наш position: absolute блок позиционировался бы относительно другого родительского блока (в данном случае весь контент на этом сайте заключен в блок DIV id="main"), который каким-либо образом позиционирован.

То есть для абсолютно позиционированного блока контейнером может являться только любым образом (кроме нормального потока по умолчанию) позиционированный предок. И еще эти блоки могут перекрываться.

Кроме того, все смещения абсолютно позиционированного блока не влияют на следующие блоки (не на потомки, а на, так называемые, сестринские). То есть на вот такие:

<DIV style="position: absolute"></DIV>
<DIV>Сестринский блок</DIV>

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

Теоретическая база накоплена, так что в скором будущем можно переходить к практике. Можете считать это анонсом практической статьи по CSS-верстке.