Доброго времени суток. По просьбе читателей, сегодня я расскажу о css свойстве position. Многие верстальщики пользуются этим свойством как position: absolute или position: relative, но большинство начинающих даже не догадываются о том, что у этого свойства есть еще три значения.

Свойство position тесно связано с порядком элементов на странице. Что же такое порядок элементов?

По умолчанию элементы отображаются последовательно один за другим в том порядке, в котором они определены в документе. Так, блочные элементы, имеют прямоугольную форму и занимают 100% ширины и поэтому располагаются один под другим. Один, ниже другой... Строчные элементы занимают ширину, равную содержимому внутри и поэтому располагаются в строчку. Один, рядом другой, потом третий... Так каким здесь боком position? А position имеет возможность управлять этим порядком и при необходимости изменять.

Стандартное значение, которое принимает position: static.
Если вы верстаете и для проверки применили это значение к элементу, не удивляйтесь если ничего не произошло. Просто static устанавливает порядок элементов, когда один идет за другим так, как установлено в документе.

position: Absolute
Располагается в окне браузера в соответствии с заданными координатами. Обратите внимание на то, что располагается элемент в окне браузера, а не во всей страницы, как думают многие.
Координаты можно задавать при помощи: top, right, bottom, left.

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

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

Левый вариант. Блок позиционируется относительно окна браузера.
Правый вариант. Блок позиционируется относительно родительского блока.

Почему это происходит? Дело в том, что элемент, которому присвоено это значение, располагается относительно ближайшего родителя, которому задано position: relative или absolute.

position: Relative
Элемент располагается относительно своего первоначального месторасположения (при помощи top, right, bottom, left). Но. Но свое место он не уступает, оно остается за элементом.

position: Fixed
Это значение нарушает обычный порядок элементов так же, как и absolute, но фиксирует сам элемент относительно границ окна. Другими словами, этот элемент при скролле не изменяет свое место расположения.

Моя предыдущая статья, как раз основана на использовании этого значения:
Фиксированный логотип относительно окна браузера

Помните. Во всеми любимом браузере IE 6 (и ниже) это значение не поддерживается. Я не буду писать о попытках решения этой проблемы, так как их много и не каждому они понравятся. Пусть каждый найдет себе решение сам. Скажу честно, никогда не использовал решения этой проблемы.

position: Inherit
При использовании этого значения, элементу присваивается такое же значение как и у родителя.
Пример:

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