Просмотров: 1 555

Свойство CSS position с помощью, которого можно изменять нормальный поток элементов.

Как я писал в предыдущем уроке, все элементы на веб-странице, пока к ним не будет применено никаких свойств CSS, которые меняют нормальный поток элементов, будут находится в нормальном потоке.

Одно из свойств CSS, которое может поменять нормальный поток элементов является свойство position.

Это свойство может принимать следующие значения:

position: absolute | fixed | relative | static | inherit

absolute — абсолютное позиционирование элемента

fixed — фиксированное позиционирование элемента

relative — относительное позиционирование элемента

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

inherit — в этом случае значение свойства position будет заимствоваться у родительского элемента.

Значение static — это значение, которое используется для данного свойства по умолчанию.

Говоря о свойстве position нельзя не оставить без внимания еще 4 свойства CSS, которые имеют самую прямую связь к свойству position.

Это свойства:

left (расстояние от левого края)

right (расстояние от правого края)

top (расстояние от верхнего края)

bottom (расстояние от нижнего края)

03-05-2014 6-04-19

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

То, относительно чего будет считаться это расстояние, будет зависеть от значения свойства position.

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

Когда в предыдущем примере мы создавали с вами элементы div и span, которые следовали друг за другом, на самом деле эти элементы имели свойство position со значением static. Это и есть тот самый нормальный поток.

<div style="background:#ccc; position:static;">Блок 1</div>
<div style="background:#9cc; position:static; left:250px; top:150px; bottom:44px; right:88px;">Блок 2</div>
<div style="background:#c9c; position:static;">Блок 3</div>

Как видите, добавление свойства position со значением static абсолютно не меняет ситуацию. Положение блоков остается то же самое, несмотря на то, что среднему элементу даже добавлены свойства left, top, bottom и rigth.

Пока все просто. Остальные значения свойства position мы с вами разберем в следующих уроках.

Этот материал входит в соостав курса «Базовые приемы верстки веб-страниц»

К списку всех материалов курса. Доступ можно получить в группе вконтакте, в разделе «Ссылки».