Оглавление

12.6. Последовательность отображения слоев

Атрибут z-index устанавливает порядок, в котором свободно позиционированные элементы будут перекрываться друг другом. Элемент с большим значением z-index перекрывает элементы с меньшим значением. Значение у родителя равно нулю.

 

Рассмотрим порядок перекрытия на примере, а заодно приведем вариант блочной верстки с использованием абсолютного позиционирования для панели навигации (листинг 12).

 

Листинг 12. Атрибут z- index


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Атрибут z-index</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
* { margin: 0; padding: 0 } /* Убираем все отступы */
body { font-family: Verdana, Tahoma, sans-serif; font-size: 14px }
.header { background-color: silver; padding: 10px; height: 50px; 
          text-align: center; line-height: 50px; }
.menu { border: 1px solid black; width: 150px; height: 200px; margin: 0; 
        padding: 5px; position: absolute; left: 10px; top: 80px }
.text { border: 1px solid black; padding: 5px; 
        margin: 10px 10px 10px 185px; min-height: 500px }
.footer { background-color: silver; padding: 5px; height: 30px; line-height: 30px }
. divl { width: 100px; height: 100px; position: absolute; top: 70px; 
         left: 50px; z-index: 1; background-color: silver } 
.div2 { width: 100px; height: 100px; position: absolute; top: 120px; 
        left: 100px; z-index: 2; background-color: red } 
.div3 { width: 100px; height: 100px; position: absolute; top: 170px; 
        left: 150px; z-index: 3; background-color: green } 
</style> 
</head> 
<body> 
<div class="header"><h2>Зaгoлoвoк</h2></div> 
<div class="text"> <h2>Основное содержимое страницы </h2>
<p>Какой-то текст</p>
<div style="position: relative; top: 30px"> 
  <div class="divl">z-index = l</div> 
  <div class="div2">z-index = 2</div> 
  <div class="div3">z-index = 3</div>
</div> 
</div>
<div class="footer">Информация об авторских npaвax</div> 
<div class="menu">Панель навигации с абсолютным позииионированием</div> 
</body> 
</html>


Посмотреть пример

<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити