Обычно элементы 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.