Свойство position

Обычно элементы Web -страницы позиционируются относительно предыдущих элемен­тов в коде HTML . Мы будем рассматривать свойство position , которое позволяет вы­полнять позиционирование элемента независимо от предшествующего кода или, говоря другими словами, отдельно от потока документа. Спецификацией CSS1 предусмотрены следующие три значения для свойства position:

✓ static - отвечает размещению объектов в том порядке, в котором они встречаются в коде документа. Значение static используется по умолчанию;

✓ absolute - элемент с этим значением свойства position помещается в видимую область, а сама область имеет определенные координаты, которые не зависят от рас­положения других элементов. Вместе с перемещением видимой области перемещает­
ся и содержимое. Если внутри видимой области какой-либо элемент получает коор­динаты, выходящие за пределы области, то этот элемент не показывается;

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

Координаты видимой области задаются с помощью обычных декартовых координат. Началом координат для абсолютно позиционированного элемента является верхний ле­вый угол документа. Поэтому координаты (х, у) элемента выражаются значениями свойств left и top соответственно. Пара значений (0,0) отвечает расположению элемента в начале координат. Увеличение значения х смещает элемент вправо вдоль оси абсцисс, а увеличение у - означает смещение вниз вдоль оси ординат.

Значения координат left и top могут выражаться в допустимых для листов стилей величинах:

✓ в пикселах, например, left : 100рх (если единица измерения не указана, то едини­цей считается пиксел);

✓ в пунктах, например, top : бOpt ;

✓ в процентах (например, left : 30%; top : 50%), причем проценты вычисляются относительно ширины ( width ) и высоты ( height ) родительского элемента (если для родительского элемента указан размер, скажем, width : auto , то нельзя пользоваться процентным выражением для величины left дочернего элемента);

Если определение свойств left и top отсутствует, элемент располагается в потоке документа, то есть он находится в том месте страницы, как и при отсутствии свойства position.