3.19. Задание положения

Как только схема позиционирования описана, по четырем значениям сдвига осуществляется реальное размещение с помощью свойств top, right, bottom, left, значениями которых могут быть <длина>, <процент>, auto или inherit. Начальное значение: auto.

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

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

div {position: absolute; height: 120px; width: 300рх; border: 1px solid #000; }

img {position: absolute; top: 100%; left: 0%;}

3.20. Обработка переполнения

В тех случаях, когда размер элемента чересчур мал для того, чтобы тот мог вместить свое содержимое, возможно определить порядок действий над содержимым, которое не помещается в элемент. Для этих целей используется свойство CSS overflow со значениями : visible, hidden, scroll, auto, inherit. Начальное значение: visible.

• Значение по умолчанию – разрешает выводить содержимое и вне пределов прямоугольника элемента.

• Если значение overflow равно hidden, то содержимое, которое не вмещается внутрь прямоугольника элемента, отсекается и не выводится вообще.

• При выборе scroll к прямоугольнику элемента добавляются полосы прокрутки даже в том случае, если содержимое элемента помещается на экране.

• При значении auto прокрутка добавляется лишь при условии, что содержимое не вмещается.

Можно задать размеры и положение зоны видимости при помощи свойства clip со значениями rect(top, right, bottom, left), auto, inherit.

Для управления видимостью элемента как такового используется свойство CSS visibility со Значениями visible, hidden, collaps, inherit.

Замечание: Значение collapse рекомендуется для использования в столбцах и строках таблиц, отвечающих правилам CSS. Использование collapse с любыми прочими элементами может их скрыть, однако лучше всего этого избегать. Это значение не поддерживает Internet Explorer для Windows версии 6 и ниже.

Элементы могут перекрываться. По умолчанию наложение элементов происходит в порядке их появления в документе, при этом более «поздние» отображаются поверх тех, которые следовали до них. Можно изменить порядок наложения элементов, установив свойство z-index. Свойство z-index принимает любое целочисленное значение, как положительное, так и отрицательное. При этом чем больше значение, тем выше место данного элемента в «стеке», отрицательные значения отодвигают элемент «глубже» по оси z.

3.21. Расчет позиции элемента

Хотя задать позицию элемента, используя свойства сдвига, – дело простое, все может усложниться в том случае, если расстояния смещения перемешаны с отсту­пами и шириной содержимого элемента и на них действуют ограничения охватываю­щего блока по ширине. На деле в CSS 2.1 содержится ошеломительно обстоятельный список ограничений и правил урегулирования конфликтов с несовместимыми и неука­занными значениями.

Ниже приведен общий прикладной обзор правил, которые должны помочь в большинстве случаев.

По правилам если значения несовместимы или не заданы, то, говоря обобщенно, про­странство скорее подгоняется справа для языков, где пишут слева направо (и слева – для языков, где пишут справа налево). Проблемы с высотой блока разрешаются под­гонкой с нижней стороны элемента.

• В том случае, если все значения заданы (т. е. значений auto нет), а сумма не равна ширине охватывающего блока, пользовательский агент должен просто проигнори­ровать значения сдвига справа (для языков, где пишут слева направо) и снизу, допустив расхождения на соответствующих сторонах.

• Если ширина элемента указана, она уже не меняется. Если, напротив, ширина тек­стового (незамещаемого) объекта равна значению auto, то зона вывода содержи­мого «подгоняется по размеру» так, чтобы оказаться достаточной для вывода в ширину. Значение auto замещаемых элементов, например изображений, меняется на реальные размеры объекта в пикселях.

• Ширина зоны содержимого элемента меняется по размеру только в том случае, если установлена в auto, а все другие свойства при этом имеют конкретно задан­ные значения. Являясь единственным параметром, равным auto, ширина элемента становится последним вариантом подгонки и соответственно корректируется.

• Для выполнения нужных корректировок агенты сначала ищут auto в значениях правого (для языков с письмом слева направо) отступа или сдвига. Для вертикаль­ной подгонки меняются равные auto свойства нижнего края.

• Когда значения top и left равны auto, элемент как было сказано выше помеща­ется в «статическую» позицию, которая изменяется лишь в том случае, если все остальные параметры имеют заданные значения, a left (по горизонтали) и top (по вертикали) являются единственными параметрами со значением auto. Во всех других случаях пространство слева и сверху не корректируется.

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

Замечание: Приведенные правила исходят из корректности поведения согласно спе­цификации CSS 2.1 и излагают основы работы браузеров, соответствую­щих стандарту. Не забывайте, однако, что из-за трудностей в реализации модели прямоугольников в Internet Explorer для Windows (всех версий, кроме режима Standards в IE 6 и 7) используется иной метод расчета по­ложения элементов с учетом заполнения, отступов и границ.