Пространства имен и схемы 70 Сегментация проблемы 71

Элементы могут быть позиционированы абсолютно не только в двухмерном, но также и в трехмерном пространстве. Но в данном случае уместнее говорить о слоях.

Представьте себе визуализацию документа, содержащего несколько слоев прозрачности. Теперь вообразите ячейки, находящиеся на каждом уровне прозрачности. Стек прозрачностей представляет собой как раз третье измерение. Z-измерение — это слоистое представление, при котором ячейки можно накладывать друг на друга. Каждая ячейка расположена в контексте стека. Каждой ячейке в контексте стека присваивается номер уровня стека (целое число: может быть отрицательным). Номер указывает на положение ячейки относительно других ячеек в том же контексте. Ячейки с более высоким уровнем стека располагаются перед ячейками с более низким уровнем. Например, ячейка с уровнем стека 15 располагается выше ячейки с уровнем стека 2.

Слои особенно полезны при анимации объектов. С помощью сценария, манипулирующего моделью DOM и свойствами элемента, можно создать анимированный документ, в котором объекты перемещаются, выходя один поверх другого. Например, показ слайдов, написанных на языке XML, можно визуализировать с помощью таблицы стилей CSS, причем особые эффекты при представлении будут создаваться анимированными параграфами. Третье измерение или Z-позиционирование определяется с помощью свойства z-index, например:

OVERLAP

{

display: block;

font-size:10pt;

}

Если фоновый цвет не определен, ячейки, закрытые другими ячейками, будут прозрачными. Фоновый цвет для них указывается помощью свойства background-color.

Еще одним интересным свойством является float: соответствующие ячейки размещаются относительно левого или правого края содержащего блока. Когда элемент задается со свойством float, он связывается с левой или правой стороной содержащей его ячейки. На следующем рисунке показаны два элемента, визуализированные как плавающие (float) ячейки. Они прикрепляются и отображаются относительно ячейки блока, а не документа, содержащего эту ячейку. Таким образом, в отличие от элементов с парой свойство/значение position: absolute, элементы со свойством float: right или float: left позиционируются относительно непосредственно содержащей их ячейки:

К ячейкам применимы три базовых свойства: margin (отступ), border (граница) и padding (заполнение).

У каждой ячейки имеется граница (даже если она не видна), которая отделяет ее от края полотна или от соседних ячеек. Расстояние между границей и внешним краем соседней ячейки или между границей и содержащей ее ячейкой называется отступом (margin). Расстояние между ячейкой и ее границей называется заполнением (padding).