Для начала немного о том для чего эта статья. Когда появилась седьмая Opera я стал замечать, что некоторые вещи, которые выглядели как и положено в шестой Opera, имеют совершенно непотребный вид в седьмой. Это коснулось и одного тестового примера, который я естественно решил переделать. Но это оказалось довольно сложной задачей, т.к. надо было подогнать пример под шесть броузеров (IE 5-6, Opera 6-7, NN и Mozilla). Но мое творение постоянно где-то "разъезжалось". Было очевидно, что в разных броузерах блоки, имеющие различные типы позиционирования в пределах одного контейнера, располагаются по разному. Так и появилась эта статья, целью которой было сделать небольшой сравнительный анализ различных схем позиционирования в наиболее популярных броузерах.

Для анализа были взяты следующие броузеры:

Internet Explorer 5.0

Internet Explorer 6.0

Opera 6.0

Opera 7.0

Mozilla 1.0

Netscape 6.2

Создадим три блока test1, test2, test3 и поместим их внутрь блока ext:

#ext{

	border: 2px solid #000;

	margin: 20px;

	width: 80%;

	padding: 10px;

	background-color:#ccc}

#test1{

	border: 1px solid #000;

	margin: 10px;

	text-align: center;

	width: 30%;

	background-color:#6f9}

#test2{

	border: 1px solid #000;

	margin: 10px;

	text-align: center;

	width: 30%;

	background-color:#ff6}

#test3{

	border: 1px solid #000;

	margin: 10px;

	text-align: center;

	width: 30%;

	background-color:#f96}

...

	<div id=ext>

	<div id=test1>Это первый блок</div>

	<div id=test2>Это второй блок</div>

	<div id=test3>Это третий блок</div>

	</div>

При таком позиционировании, расположение блоков будет таким, как показано на рис.1

Рис. 1 - Нормальное позиционирование трех последовательных блоков. Их размер (30%) определяется относительно размера внешнего блока. Во всех броузерах выглядит одинаково.

Укажем для второго блока относительное позиционирование (position: relative), т.е. сдвинем его вправо относительно нормального положения на 10% (left:10%) и вниз на 20% (top:20%) (рис.2).

Рис. 2.1 - IE 5.0 и 6.0. Второй блок имеет относительное позиционирование и сдвинут вниз и вправо.

Рис. 2.2 - NN 6.2 и Mozilla 1.0. В данном случае при относительном позиционировании второго блока он сдвигается только вправо.

Рис. 2.3 - Opera 6.0 и Opera 7.0. Действует аналогично IE. Интересно то, что второй блок, перекрывается третьим, тогда как в Opera 7.0 - наоборот.

Картина будет такая же и в том случае, если мы таким же образом позиционируем третий блок (рис. 3)

Рис. 3.1 - IE 5.0 и 6.0.

Рис. 3.2 - NN 6.2 и Mozilla 1.0. В данном случае, смещение блока, заданное в относительных величинах, рассчитывается от размеров внешнего контейнера. Смщение вниз (вверх), соответственно рассчитывается от высоты блока. Если же она явным образом не задана, то получается такая ситуация - блок по вертикали не перемещается. Можете провести следующий эксперимент: задайте высоту внешнего блока #ext, например, в 150px. Теперь задайте смещение блока по вертикали на 100%, а затем на 150px. В первом и втором случае результат будет одинаков - блок переместиться по вертикали на одну и ту же величину. Следовательно, иногда имеет смысл непосредственно указывать высоту блока. Причем при смещении по горизонтали подобных проблем не возникает.

Рис. 3.3 - Opera 6.0 и Opera 7.0.

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

Рис. 4.1 - IE 5.0 и 6.0.

Рис. 4.2 - NN 6.2 и Mozilla 1.0. В данном случае размер второго блока определяется от ширины окна броузера.

Рис. 4.3 - Opera 6.0. То же самое. Размер второго блока определяется от ширины окна броузера.

Рис. 4.4 - Opera 7.0. Без комментариев.

Если же для блока указать координаты размещения, то они должны определяться от границ документа. Укажем для второго блока left: 10px; top: 10px; (т.е. верхний левый угол второго блока должен совпасть с верхней и левой границей внешнего блока) (рис. 5).

Рис. 5.1 - IE 5.0 и 6.0.

Рис. 5.2 - NN 6.2 и Mozilla 1.0.

Рис. 5.3 - Opera 6.0.

Рис. 5.4 - Opera 7.0.

Рассмотрим ситуацию с абсолютным позиционирование третьего блока без указания координат (рис. 6). В данном случае возникает следующий вопрос - будет ли третий блок находиться внутри внешнего? По идее не должен.

Рис. 6.1 - IE 5.0 и 6.0.

Рис. 6.2 - NN 6.2 и Mozilla 1.0.

Рис. 6.3 - Opera 6.0.

Рис. 6.4 - Opera 7.0.

Теперь перейдем к плавающей модели. Если мы для первого блока укажем float: left, то два других блока должны как бы "обтекать" его справа. Как это выглядит показано на рис. 7

Рис. 7.1 - IE 5.0 и 6.0. Интересно, каким образом определена ширина второго и третьего блока?

Рис. 7.2 - NN 6.2 и Mozilla 1.0. Интересно, а что это стало с высотой второго блока и почему такое странное расположение?

Рис. 7.3 - Opera 6.0. Странно, что здесь то же, что и в NN. Значит это не глюки?

Рис. 7.4 - Opera 7.0. Это как раз то, что я и ожидал от данной схемы.

Если установить плавающую модель позиционирования для второго блока (float: left) - рис.8 ...

Рис. 8.1 - IE 5.0 и 6.0. Так, с шириной у нас определенно какие-то проблемы. А! в данном случае ширина блока устанавливается от оставшейся части пространства. Очень полезное наблюдение. Т.е. если мы возьмем блок, расположим его, например слева (float: left), а для второго укажем width: 100%, то второй блок займет 100% от оставшегося пространства, а не 100% от ширины внешнего блока.

Рис. 8.2 - NN 6.2 и Mozilla 1.0. Здесь упорно не хотят обтекать наши блоки.

Рис. 8.3 - Opera 6.0.Здесь тоже упорствуют.

Рис. 8.4 - Opera 7.0. А здесь продолжают радовать.

... и, наконец, для третьего блока (float: left) - рис.9.

Рис. 9.1 - IE 5.0 и 6.0.

Рис. 9.2 - NN 6.2 и Mozilla 1.0. Очень интересно. Получается, что эти три блока как бы "вырваны" из нормального потока, следовательно, во внешнем блоке ничего не остается, т.е. он пустой. Тогда несколько странно выглядит предыдущий рисунок. По идее ширина внешнего блока должна была быть другой.

Рис. 9.3 - Opera 6.0. То же самое.

Рис. 9.4 - Opera 7.0.

Попробуем расположить первый блок слева, а второй - справа (рис. 10). эта схема в общем подтверждает сделанные ранее выводы.

Рис. 10.1 - IE 5.0 и 6.0.

Рис. 10.2 - NN 6.2 и Mozilla 1.0.

Рис. 10.3 - Opera 6.0.

Рис. 10.4 - Opera 7.0.

Положение блоков, котрое мы получили на рис. 9, возможно и в том случае, если первым и второй блок расположить слева, а третий - справа (рис. 11).

Рис. 11.1 - IE 5.0 и 6.0.

Рис. 11.2 - NN 6.2 и Mozilla 1.0.

Рис. 11.3 - Opera 6.0.

Рис. 11.4 - Opera 7.0.

Ну, и на последок давайте пофантазируем. Расположим первый блок слева, третий - справа, а второй - абсолютно (рис. 12). Очень интересный результат.

Рис. 12.1 - IE 5.0 и 6.0.

Рис. 12.2 - NN 6.2 и Mozilla 1.0.

Рис. 12.3 - Opera 6.0.

Рис. 12.4 - Opera 7.0.

А теперь то же самое, только третий блок расположим слева (рис. 13)

Рис. 13.1 - IE 5.0 и 6.0.

Рис. 13.2 - NN 6.2 и Mozilla 1.0.

Рис. 13.3 - Opera 6.0.

Рис. 13.4 - Opera 7.0.

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

Для того, чтобы правильно позиционировать блоки, в первую очередь необходимо знать теорию, т.е. как это должно быть. Для этого следует ознакомиться со спецификацией CSS 2 . На самом деле очень интересное стиво.

Ну и на последок хочется отметить Oper'у. Последнюю. Порадовала.