Свойства позиции

В этом разделе мы рассмотрим свойства, касающиеся позиционирования элементов, которые были определены в стандарте CSS 2, это position, left, right, top, bottom и z-index.

Свойство position устанавливает способ позиционирования элемента относительно окна браузера или других объектов документа. На практике часто используются два его значения: relative и absolute.

В случае relative, заданного в качестве значение, положение элемента устанавливается относительно родителя. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от родителя, в зависимости от применяемых значений этих свойств (в том числе и отрицательных).

Значение absolute указывает, что элемент позиционирован абсолютно. В этом случае его размер не учитывается в прорисовке документа, т.е. он не существует в обычном потоке прорисовки документа. Положение элемента задается свойствами left, top, right и bottom относительно документа или ближайшего предка с позицией relative или absolute.

Абсолютно позиционированные элементы могут накладываться друг на друга в документе, имитируя тем самым третье измерение, перпендикулярное экрану, или так называемую ось Z. Для решения конфликта взаимного расположения абсолютно позиционированных элементов и их наложения друг на друга, существует CSS-свойство z-index. Оно принимает любое целочисленное значение, положительное или отрицательное. Большее значение означает отображение элемента поверх всех остальных, т.е. выше по оси Z, меньшее – ниже.

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