Позиционирование (выравнивание) блочных элементов в CSS
Как вы вероятно уже знаете верстать сайт можно, используя таблицы, в этом случае страница разбивается на ячейки. А можно для этих целей использовать блоки, когда страница сайта состоит из отдельных элементов.
Наверное, не ошибусь, если скажу, что при этом серьезной проблемой для многих начинающих веб-мастеров является задача расположить блоки в заданном месте веб-страницы.
Одной из главных трудностей при верстке с помощью блоков является позиционирование (выравнивание) этих самых блоков.
Немного о слоях (layers)
Думаю, многие из вас слышали о таком понятии, как слой (layer). И, как правило, под слоем понимается блок, заданный тегом <div>. На самом деле все немного не так.
В HTML не существует слоев. Это просто метафора. Когда речь идет о слоях, то под ними понимается некий html контейнер (элемент), который может быть помещен в определенном месте веб-страницы.
Вторым заблуждением является отнесение к слоям только блока, заданного тегом <div>. Это тоже не верно. К ним также можно отнести параграфы (<p>), списки (<ul>) и другие элементы.
А теперь о <DIV>ах.
Как уже говорилось выше, задать местоположение можно любому HTML элементу. Для этого нет нужды всегда использовать тег <div>. Также использование данного тега не обязывает вас задавать ему какое-либо положение на веб-странице.
Смысл применения блока, заданного тегом <div> сводится к укрупнению. Ведь внутрь его можно поместить другие элементы (параграфы, картинки, и тд.). Таким образом получается крупный блок, с разнообразным содержимым, который значительно легче позиционировать на веб-странице, нежели каждый из элементов в отдельности.
Позиционирование элементов.
Существует четыре основных типа позиционирования:
1. Статическое (Static)
2. Абсолютное (Absolute)
3. Фиксированное (Fixed)
4. Относительное (Relative)
Статическое (Static)
Используется как расположение «по умолчанию». В этом случае браузер просматривает html код, разделяет его на элементы и составляет из них страницу. Получается последовательность из ряда элементов. Выводятся они в том порядке, в котором указаны в html коде.
Применение параметров left, top, right и bottom не приводит к каким-либо результатам.
Необходимо помнить о статическом позиционировании, когда используется относительное расположение.
Абсолютное (Absolute)
С помощью абсолютного позиционирование задаются координаты левого верхнего угла блока. При этом отсчет координат происходит относительно расположения родительского элемента. Если родительским элементом является окно браузера, тогда выравнивание блока происходит относительно него. Если существует другой элемент, внутри которого расположен блок, тогда выравнивание происходит уже относительно этого элемента.
Фиксированное (Fixed)
Уже из названия становится ясно, что в данном случае элемент фиксируется. Он располагается в определенном месте веб-страницы и никуда не сдвигается. Подобное выравнивание часто применяется по отношению к всплывающим окнам, когда они фиксируются по центру и не смещаются при прокрутке страницы.
Относительное (Relative)
С этим видом позиционирования могут быть сложности. Его название не совсем удачное. Многие путают относительное и абсолютное позиционирование элементов. Может показаться, что выравнивание происходит относительно родительского элемента. А в случае с абсолютным позиционированием - относительно окна браузера. Но это не так.
Нужно уяснить, что расположение элемента в этом случае происходит относительно его же места в статическом положении. Это то, о чем упоминалось выше.
Проще говоря, вы указываете браузеру, что необходимо передвинуть элемент на столько-то пикселей, относительно того места, где он расположен по умолчанию.
Существует еще один сложный момент. Что произойдет, если родительский элемент имеет относительное позиционирование, а вложенный в него элемент абсолютное? В этом случае отсчет координат дочернего элемента будет производиться относительно родительского элемента, с учетом его смещения, если оно имеет место.
Подведем итог.
Итак, имеется свойство position. Это свойство может принимать 4 значения Static, Absolute, Fixed и Relative. По умолчанию идет Static.
Когда вы указываете координаты для элемента, необходимо также сообщить браузеру, каким образом он должен эти координаты отсчитывать. Надо дать ему отправную точку.
Не забывайте, что при отсутствии свойства position координаты учитываться не будут, блок останется на прежнем месте, в своем статическом положении.
А теперь посмотрим, каким образом задаются координаты.
Для этих целей применяются четыре вида свойств:
1. Top
2. Left
3. Right
4. Bottom
Top - положительное значение (например, 20px) смещает блок на 20 пикселей вниз. Отрицательное значение (-20px) смещает элемент на 20 пикселей верх. Все это происходит относительно левого верхнего угла.
Left - смещение влево или вправо, в зависимости от знака. Относительно левого верхнего угла.
Right - смещение вправо и влево, смотря какой знак. Относительно правого верхнего угла.
Bottom - смещение вверх или вниз, зависит от знака. Происходит относительно левого нижнего угла.
Вот код HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="1">
<div id="11"></div>
</div>
<div id="2"></div>
</body>
</html>
А это CSS:
#1 {
position:relative;
top:100px;
left:100px;
width:500px;
height:500px;
background-color:#CCCCCC;
}
#11 {
background-color:#003399;
position:absolute;
bottom: -30px;
right: -50px;
width:100px;
height:100px;
}
#2 {
background-color:#990066;
width:200px;
height:300px
}
Потренируйтесь.
Пока писал и сам разобрался 
.
Ключевые теги: position, div
