z-index
Краткое описание свойства z-index
Управляет порядком отображения слоев. z-index - Управляет порядком отображения слоев
Все элементы, которые позиционируются могут накладыватся друг на друга, свойство z-index позволяет управлять порядком отображения этих элементов.
Синтаксис:
p {z-index:число | auto;}
Описание аргументов:
Значение по умолчанию
auto Обьектная модель:
[window.]document.getElementById("elementID").style.zIndex Пример использования атрибута z-index: Листинг style.css:
.block{width:90px; height:70px; background:#333333; position:relative;}
.block_1{width:70px; height:70px; background:#333333; position:relative; top:-30px;}
.block_2{width:90px; height:70px; background:#333333; position:relative; z-index:1;}
.block_3{width:70px; height:70px; background:#333333; position:relative; top:-30px;}
Листинг index.html: <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=
"http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv=
"Content-Type" content="text/html; charset=windows-1251" />
<link type=
"text/css" rel=
"stylesheet" href=
"style.css" />
<title>
Параметр z-index</title>
</head>
<body>
<div class=
"block">
<div>
<div class=
"block_1">
<div>
<div class=
"block_2">
<div>
<div class=
"block_3">
<div>
</body>
</html>
* Наложение блоков block и block_1 происходит без использования свойства z-index.
* Наложение блоков block_2 и block_3 происходит с использованием свойства z-index для block_2.
Добавить комментарий
Комментарии
RSS лента комментариев этой записи.