Относительное позиционирование

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

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

• Описанием вида {position: relative; }.

• Позиционированием относительно своего исходного положения в нормальном потоке с учетом одного или нескольких задающих сдвиг свойств (top, right, bottom, left). He заданные явным образом свойства приобретают значение (по умолчанию) auto.

• Сохранением исходного пространства в потоке содержимого документа за самим элементом.

• Возможностью перекрытия других элементов при размещении.

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

em {position: relative; top: -30рх; right: -30рх; background: #ccc; }

При относительном позиционировании свойства top, right, bottom и left смещают элемент относительно его исходного положения. При этом положительные значения top сдвигают элемент вниз, такие же значения left сдвигают элемент вправо (на дан­ное расстояние) и т. д. В итоге положительное значение для некоторой стороны экви­валентно отрицательному для ей противоположной (формулы для расчета значений: right=-left и bottom=-top).

При появлении недопустимых значений спецификация CSS 2.1 рекомендует проигнори­ровать свойство right (для языков, где пишут слева направо; в остальных случаях - про­игнорировать left), приняв его равным значению -left. При выявлении конфликта между bottom и top значение первого игнорируется и назначается равным второму с противоположным знаком. Тем самым «излишне определенное» стилевое правило вида:

em {top: 10; bottom: 50; left: 50: right -4; } будет трактоваться, как будто было задано так:

em {top: 10: bottom: -10; left: 50; right: -50; }

Относительным позиционированием нередко пользуются как средством формирования охватывающих блоков, определяя позицию элемента как relative, но оставляя его на месте. В итоге потомки данного элемента могут позиционироваться с учетом созданно­го этим элементом прямоугольника по схеме абсолютного размещения.