ИНФОРМАЦИЯ,    ДИЗАЙН,    ПЕРЕВОДЫ,    РЕКЛАМА   .   .   .
w a p - с а й т
Информационный портал
Сегодня:  
admin@aranea.ru
+79068922256

  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' определяет:

  1. Уровень слоя блока в текущем пакетном контексте.
  2. Учреждает ли блок локальный слоевой контекст.

Значения имеют следующие значения:

<integer>
Это целое число является уровнем слоя сгенерированного блока в текущем пакетном контексте. Блок также учреждает локальный слоевой контекст, в котором его уровень слоя равен '0'.
auto
Уровень слоя сгенерированного блока в текущем пакетном контексте является тем же самым, что и у родительского блока. Блок не учреждает нового локального слоевого контекста.

В следующем примере уровни слоев для блоков (названные их атрибутами "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). Поведение блока по умолчанию позволяет блокам под ним быть видимым через прозрачные области в его контексте. В примере каждый блок перекрывает блоки ниже него прозрачно. Это поведение может преодолеваться использованием одного из существующих свойств фона.

← Назад | Вперед →
Copyright © 2006 -  aranea.ru