Здравствуйте, сегодня поговорим об основах блочной (div) верстки, благодаря данной информации вы сможете располагать блоки (с картинками, анимашками и др.) в любом месте вашего сайта.

Скачать исходники для статьи можно ниже

В данной статье мы рассмотрим свойства CSS, такие как: position:static, position: relative, position:absolute, float и др.

1. position:static

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

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

#div-1 {
 position:static;
}

По умолчанию div блоки располагаются так:

2. position:relative

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

Давайте передвинем DIV-1 вниз на 20 пикселей, и влево на 40 пикселей:

#div-1 {
 position:relative;
 top:20px;
 left:-40px;
}

У нас получиться следующее:

Обратите внимание, что на том месте, где бы должен был находится наш блок #div-1, теперь образовалось пустое пространство. Следующий за блоком #div-1, блок #div-after не переместился ниже, потому что, #div-1 по-прежнему занимает свое место в документе, несмотря на то, что мы передвинули его.

3. position:absolute

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

Давайте применим абсолютное позиционирование для блока div-1a:

#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

Получим следующее:

Обратите внимание, что на этот раз, поскольку блок #div-1a был удален из документа, оставшиеся элементы на странице расположились по-другому: #div-1b, #div-1c и #div-after переместились выше, на место удаленного блока. А сам блок #div-1a, расположился точно в правом, верхнему углу страницы.

Таким образом, мы можем позиционировать любой элемент относительно страницы, используя свойство – position: absolute.

В большинстве же случаев, нам нужно позиционировать элемент (div-1a) относительно родительского элемента (div-1), а не всей станицы целиком – и на этом моменте нам поможет относительное позиционирование.

4. position:relative + position:absolute

Если придать блоку div-1 относительное позиционирование, любые элементы внутри него будет позиционироваться по отношению к div-1. Тогда, если для блока div-1a применить абсолютное позиционирование, мы можем переместить его в правый верхний угол блока div-1:

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

Получим следующее:

5. Две колонки.

Теперь давайте, используя относительное и абсолютное позиционирование, создадим две колонки внутри блока div-1:

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

И вот что у нас получилось:

Одним из преимуществ использования абсолютного позиционирования является то, что мы можем позиционировать элементы в любом порядке на странице, независимо от порядка их следования в HTML. Так что, в данном примере, блок div-1b стоит перед div-1а – не правда ли классно!.

А куда же делись остальные элементы из нашего примера (div-after, div-1c)?

Они скрылись под абсолютно расположенными блоками (div-1b, div-1a). К счастью, есть возможность это исправить.

6. Две колонки с абсолютной высотой.

Одним из решений является установить фиксированную высоту на элементах.

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

#div-1 {
 position:relative;
 height:250px;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

Вот что получиться в итоге:

7. Свойство: float (обтекание)

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

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

#div-1a {
 float:left;
 width:200px;
}

Получим следующее:

8. Колонки со свойством float. 

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

#div-1a {
 float:left;
 width:150px;
}
#div-1b {
 float:left;
 width:150px;
}

В итоге получиться так:

Также, можно назначить колонкам противоположное значение float, в этом случае, они распределятся по краям контейнера.

9. Свойство clear

Если мы хотим, чтобы расположенные после колонок блоки были видны и располагались внизу под колонками, то нам необходимо для блока div-1c применить свойство clear:

#div-1a {
 float:left;
 width:190px;
}
#div-1b {
 float:left;
 width:190px;
}
#div-1c {
 clear:both;
}

И получим следующее:

Теперь колонки располагаются красиво и правильно!

Также данный результат можно получить, если назначить родительскому контейнеру (div-1) свойство overflow: hidden.

10. position: fixed

Это фиксированное позиционирование.

Фиксированное позиционирование (position: fixed), является подразделом абсолютного позиционирования. Единственное его отличие в том, что он всегда находится в видимой области экрана, и не двигается во время прокрутки страницы. В этом отношении, он немного похож на фиксированное фоновое изображение.

Пример:

#div-1a {
 position:fixed;
 top:0;
 right:0;
 width:200px;
}

То есть это плавающий блок: