Способ позиционирования

Как и любое другое свойство, свойство Position задается при помощи таблиц стилей CSS.

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

- position:absolute означает, что позиционирование слоя будет происходить относительно левого верхнего угла страницы.

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

- position:static означает, что позиционирование слоя будет происходить относительно фона.

Без указания этого свойства (именно со значением absolute) невозможно установить позицию слоя относительно левого верхнего угла окна браузера с помощью свойств left и top. Итак, рассмотрим каждый вид позиционирования.

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

При абсолютном позиционировании координаты слоя вычисляются относительно левого верхнего угла окна родительского элемента или браузера, если родителя нет. Слой, заданный с абсолютным позиционированием, может располагаться под основным текстом или, наоборот, поверх него. Положение определяется с помощью стилевого атрибута z-index и позволяет гибко управлять положением слоя по условной z-оси. Таким способом удобно выводить на веб-странице различные подсказки, всплывающие окна, рекламу или плавающие меню.

<style type="text/css">
#centerLayer {
position: absolute; /* Абсолютное позиционирование */
width: 400px; /* Ширина слоя в пикселах */
height: 300px; /* Высота слоя в пикселах */
left: 50%; /* Положение слоя от левого края */
top: 50%; /* Положение слоя от верхнего края */
background: #fc0; /* Цвет фона */
}
</style>
<div id="centerLayer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>

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

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