Как сделать сайтУроки CSS → Урок 10. Позиционирование блоков

CSS - Урок 10. Позиционирование блоков

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

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

Итак, приступим. Предположим, у нас есть вот такая стандартная html-страница:

шапка сайта
меню контент
низ сайта


Эту страницу мы с вами делали в серии уроков, посвященных HTML, а точнее в уроке 10 этой серии, где мы и верстали ее с помощью таблицы. Эта страница имела следующий код:

<html> <head> <title>CSS позиционирование</title> </head> <body> <table width="715" border="1" align="center" cellspacing="0" cellpadding="10"> <tr bgcolor="darkred"> <td colspan="2" height="100">шапка сайта</td> </tr> <tr bgcolor="oldlace"> <td width="190" height="300">меню</td> <td>контент</td> </tr> <tr bgcolor="darkred"> <td colspan="2" height="30">низ сайта</td> </tr> </table> </body> </html>
Теперь давайте посмотрим, как можно сверстать такую страницу средствами CSS.

Если визуально разделить нашу страницу на прямоугольные блоки, то мы получим четыре блока: шапка сайта, меню, контент и низ сайта. Таким образом, мы имеем четыре div-а. Давайте напишем html-код страницы с четырьмя div-ами и каждому дадим соответствующий идентификатор (id):
<html> <head> <title>CSS позиционирование</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="header">шапка сайта</div> <div id="menu">меню</div> <div id="content">контент</div> <div id="footer">низ сайта</div> </body> </html>
Теперь, на странице style.css зададим те свойства, которые уже знаем, а именно ширину, высоту и фон каждого блока:
#header{ background:darkred; width:715px; height:100px; } #menu{ background:oldlace; width:190px; height:300px; } #content{ background:oldlace; width:525px; height:300px; } #footer{ background:darkred; width:715px; height:30px; }
Сейчас наша страница в браузере (в уменьшенном варианте) выглядит так:

CSS позиционирование

Такое позиционирование элементов называется позиционированием в нормальном потоке. Это значит, что все элементы отображаются в окне браузера сверху вниз, по вертикали, в том порядке, в каком они следуют друг за другом в html-коде.

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

  • относительное позиционирование

  • плавающая блоковая модель


Для определения схемы позиционирования используется свойство position, оно может принимать четыре значения, соответствующие выбранной схеме позиционирования:
  • static - блок позиционируется в нормальном потоке. Это значение по умолчанию.

  • relative - относительное позиционирование (относительно нормального потока).

  • absolute - абсолютное позиционирование

  • fixed - фиксированное позиционирование (фиксируется относительно области просмотра).


Сегодня мы рассмотрим абсолютное позиционирование, остальные схемы будем рассматривать в следующих уроках.

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

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

  • right - указывает на сколько надо сместить блок относительно правого края окна.

  • top - указывает на сколько надо сместить блок относительно верхнего края окна.

  • bottom - указывает на сколько надо сместить блок относительно нижнего края окна.


Вернемся к нашему примеру. Наши блоки header, menu и footer позиционируются в нормальном потоке, поэтому свойство position для них задавать не надо.

А вот блок content нужно расположить в другом месте, поэтому для него мы укажем свойство position:absolute и зададим смещение: от левого края окна на ширину блока menu, т.е. на 190 пикселов, а от верхнего края окна на высоту блока header, т.е. на 100 пикселов.
#header{ background:darkred; width:715px; height:100px; } #menu{ background:oldlace; width:190px; height:300px; } #content{ background:oldlace; width:525px; height:300px; position:absolute; left:190px; top:100px; } #footer{ background:darkred; width:715px; height:30px; }
Теперь наша страница в браузере выглядит так:

css potision

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

Так, по умолчанию для элемента body определены поля, а мы их не учитывали при задании свойств смещения. Чтобы решить эту проблему, достаточно задать для body свойство margin:0px, т.е. явно указать размер полей (в нашем примере - их отсутствие). Добавим это в таблицу стилей:
body{ margin:0px; }
Теперь наша страница выглядит так, как мы и ожидали:



В принципе размеры смещения можно было задать и для каждого блока, иногда это необходимо. Главное, что необходимо запомнить: при абсолютном позиционировании следует задать для блока свойство position:absolute и свойства смещения относительно "родительского" элемента. В нашем примере родительским элементом для div-ов было окно браузера, но может быть и по-другому.

Предположим, мы решили добавить блок новостей на нашу страницу и разместить его в блоке контента, например, вот так:



Тогда в нашу html-страницу, в div id="content" мы добавим div id="news":
<html> <head> <title>css potision</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="header">шапка сайта</div> <div id="menu">меню</div> <div id="content"> контент <div id="news">блок новостей</div> </div> <div id="footer">низ сайта</div> </body> </html>
Тогда в таблице стилей смещение мы будем указывать относительно блока content:
#news{ background:yellow; width:150px; height:280px; position:absolute; left:365px; top:10px; }
Ширина блока content равна 525 пикселов, а ширина блока news - 150 пикселов. Значит, смещение от левого края равно (525-150) 375 пикселов, но, чтобы блок не прилипал к правому краю, мы уменьшили смещение до 365 пикселов.

Аналогично рассчитываем смещение от верхнего края: высота блока content равна 300 пикселов, а высота блока news - 280 пикселов. Значит смещение от верхнего края может быть не более (300-280) 20 пикселов, мы сделали 10.

При абсолютном позиционировании, чтобы не запутаться с величинами смещения, определите сначала "родителя" и помните, что смещение происходит относительно "родителя".

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



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