|
||
|
aranea.ru || Спецификация CSS2 | 9.9. Многослойная презентация.
9.9. Многослойная презентация.В следующих разделах выражение "перед" означает ближе к пользователю, когда пользователь смотрит на экран. В CSS2 каждый блок имеет положение в трех измерениях. Дополнительно к их горизонтальной и вертикальной позициям, блоки лежат в "z-оси", и форматируются на вершине другого. Положения на Z-оси особенно уместны, когда блоки перекрываются визуально. Этот раздел обсуждает, как блоки могут быть позиционированы вдоль оси z. Каждый блок принадлежит одному многослойному контексту. Каждый блок в данном пакетном контексте имеет уровень слоя, выраженный целым числом, указывающим его положением по оси z, относительно других блоков в одном и том же пакетном контексте. Блоки с большим уровнем слоя всегда форматируются перед блоками с низкими уровнями слоя. Блоки могут иметь отрицательные уровни слоя. Блоки с одинаковым уровнем слоя в пакетном контексте складываются снизу вверх в соответствии с порядком дерева документа. Корневой элемент создает корневой слоевой контекст, но другие элементы могут формировать локальный слоевой контекст. Слоевой контекст наследуется. Локальный слоевой контекст является элементарным; блоки в других слоевых контекстах не должен идти между каким-то из его блоков. Элемент, который формирует локальный слоевой контекст, генерирует блок, который имеет два слоевых уровня: один для слоевого контекста, который он создает (всегда '0') и другой для слоевого контекста, к которому он принадлежит (определяется свойством 'z-index'). Блок элемента имеет одинаковый уровень слоя, как его родительский блок, пока не определен другой пакетный уровень свойством 'z-index'. 9.9.1. Определение уровня слоя: свойство 'z-index'.'z-index' Тип значения: auto | <integer> | inherit Начальная величина: auto Применяется: к позиционированным элементам Наследование: нет Процентная база: нет Медиа: визуальные Для позиционированных блоков свойство 'z-index' определяет:
Значения имеют следующие значения:
В следующем примере уровни слоев для блоков (названные их атрибутами "id") - это: "text2"=0, "image"=1, "text3"=2, и "text1"=3. Уровень слоя "text2" наследуется из корневого блока. Другие определяются свойством 'z-index'.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Z-order positioning</TITLE>
<STYLE type="text/css">
.pile {
position: absolute;
left: 2in;
top: 2in;
width: 3in;
height: 3in;
}
</STYLE>
</HEAD>
<BODY>
<P>
<IMG id="image" class="pile"
src="butterfly.gif" alt="A butterfly image"
style="z-index: 1">
<DIV id="text1" class="pile"
style="z-index: 3">
This text will overlay the butterfly image.
</DIV>
<DIV id="text2">
This text will be beneath everything.
</DIV>
<DIV id="text3" class="pile"
style="z-index: 2">
This text will underlay text1, but overlay the butterfly image
</DIV>
</BODY>
</HTML>
Этот пример демонстрирует запись прозрачности (transparency). Поведение блока по умолчанию позволяет блокам под ним быть видимым через прозрачные области в его контексте. В примере каждый блок перекрывает блоки ниже него прозрачно. Это поведение может преодолеваться использованием одного из существующих свойств фона. |
