Свойство z-index устанавливает положение элемента.
Свойство z-index устанавливает положение элемента на Z оси относительно остальных наложенных элементов.При наложении одних элементов на другие основную роль будет играть применяемое к ним свойство position.Числовые значения могут быть как положительными так и отрицательными,при этом чем выше значение,тем выше будет находится один элемент над другим по Z оси.Свойство применимо к элементам со свойством position,создано в версии CSS2 но проходит валидацию согласно версии CSS3.
Дополнительные свойства применяемые к z-index
| Свойство | Описание |
|---|
| position | Позиционирует элемент дополнительными значениями |
Дополнительные значения применяемые к z-index
| Значение | Описание |
|---|
| <Число> | Любое положительное или отрицательное число | | auto | Браузер сам определит положение элемента,аналогично значению z-index:0; | | inherit | Наследует значения от родителя |
Свойство работает в браузерах
    
Пример применения свойства
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство z-index</title>
<style type="text/css">
<!--
.one {
position:relative;
z-index:1;
top:0;
left:0;
width:300px;
height:100px;
color:white;
background:indigo;
text-align:center;
}
.two {
position:absolute;
z-index:2;
top:40px;
left:40px;
width:300px;
height:100px;
color:red;
background:green;
text-align:center;
}
.tree {
position:fixed;
z-index:3;
top:80px;
left:80px;
width:300px;
height:100px;
color:orange;
background:blue;
text-align:center;
}
-->
</style>
</head>
<body>
<div class="one">z-index & relative</div>
<div class="two">z-index & absolute</div>
<div class="tree">z-index & fixed</div>
</body>
</html>
Пример в действии
Генератор свойства z-index
Поэкспериментируйте сами
| Вопросов / Советов / Предложений - относящихся к материалу: 0
|
|
|
|
|
|
|
|
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ] | 
