Определение позиционного уровня

We use cookies. Read the Privacy and Cookie Policy

Определение позиционного уровня

Для размещенного блока вы можете задать позиционный уровень, в текущем контексте используя свойство z-index. Это свойство может принимать такие значения.

• «целое число» – является значением позиционного уровня сгенерированного блока в текущем контексте. Блок также назначает локальный позиционный контекст с позиционным уровнем 0.

• auto – позиционный уровень блока в текущем контексте совпадает с позиционным уровнем родительского блока.

Рассмотрим пример, приведенный в листинге 9.16. В этом примере позиционные уровни блоков именуются с использованием атрибута id. Причем позиционный уровень text2 наследуется от корневого блока. Другие уровни указываются свойством z-index.

Листинг 9.16. Позиционирование вдоль оси z

<html>

<head>

<title>Глава 9. Позиционирование вдоль оси z</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="someimg.gif" alt="Картинка"

style="z-index: 1">

<div id="text1" class="pile"

style="z-index: 3">

Этот текст будет находиться поверх изображения.

</div>

<div id="text2">

Этот текст будет находиться под всем остальным.

</div>

<div id="text3" class="pile"

style="z-index: 2">

Этот текст будет находиться ниже текста text1, но поверх изображения.

</div>

</body>

</html>

Данный пример должен пояснить вам понятие прозрачности. По умолчанию блок ведет себя так, что другие блоки, находящиеся за ним, видны сквозь прозрачную область его содержимого. В данном примере каждый блок, накладывающийся на другие блоки, является прозрачным. Такой тип поведения может быть переназначен посредством использования одного из существующих свойств фона.

Данный текст является ознакомительным фрагментом.