3.22. Фиксированное позиционирование

Фиксированное расположение элементов во многом приближается к абсолютному, имея только одно отличие: охватывающим блоком здесь считается порт, или зона, про­смотра (как правило, окно браузера). Специфичным для элементов в фиксированной позиции является то, что они не движутся при прокрутке, а остаются в одном и том же месте страницы. При выводе их на печатную полосу такие элементы разметки могут занимать постоянное место на всех страницах без исключения.

Помимо такой «устойчивости» к пролистыванию для элементов в фиксированной по­зиции характерно:

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

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

• Сближающее их с элементами в абсолютной позиции полное удаление из потока содержимого документа с расходованием пространства под ними для других нужд.

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

ul {position: fixed; top: 0px; left: 0; width: 100рх;

background-color: #999; margin: 0; padding: 10;}

p, hi {margin-left: 150px;}

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

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

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

• Описанием вида {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, но оставляя его на месте. В итоге потомки данного элемента могут позиционироваться с учетом созданно­го этим элементом прямоугольника по схеме абсолютного размещения.