Свойство z-index

       
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ош. Ош. Да Да Да Да Да Да Да Да Да Ош. Ош. Да

Ош. - Ошибки

Версия CSS CSS2
Значение по умолчанию auto
Применяется К любым позиционированным элементам

Описание свойства z-index

Данное свойство - Z-index дает возможность создавать измерение по  Z-оси (измерение перпендикулярное экрану монитора). При правильном применении этого свойства, можно выставить какой из элементов будет выше, а какой ниже по z-оси. Т.е. накладывать элементы друг на друга.

Свойство Z-index работает только для элементов у которых указано свойство position со значениями absolutefixed, relative.

Запись в CSS

z-index: число | auto | inherit

Принимаемые значения

Свойство Z-index, в основном использует числа (но только целые). Как положительные числа, так и отрицательные. Еще значением может выступать ноль. При этом порядок элементов прост - у какого элемента больше значение z-index, тот элемент и выше остальных. И наоборот: у кого меньше - тот ниже. Если значения совпадают то на передний план попадает элемент, который в HTML написан ниже.

Хотя и разрешено использовать отрицательные значения, но браузеры Netscape и Firefox (до версии 2.0) не отображают такие элементы.

Еще можно использовать значение auto. При этом порядок строится автоматически (в зависимости от положения в HTML коде).

inherit - значение наследуется у родителя.

Пример использования свойства z-index

<!DOCTYPE HTML> <html>  <head>     <title>Свойство z-index</title>   <style type="text/css">   .lay1, .lay2, .lay3, .lay4 { /* lay от английского layer - слой */     position: relative; /*Относительное позиционирование*/    }     .lay1, .lay3 {     font-size: 40px; /* Размер шрифта */     color: #0a0; /* Зеленый цвет текста */    }    .lay2, .lay4 {     top: -50px; /* Сдвигаем текст вверх */     right: 10px; /* Сдвигаем текст вправо */     color: #d00; /* Красный цвет текста */     font-size:60px;  /* Размер шрифта */    }    .lay1 { z-index: 2; }    .lay2 { z-index: 1; }    .lay3 { z-index: 3; }    .lay4 { z-index: 4; }   </style>  </head>  <body>   <p>Вариант один</p>   <div class="lay1">Этот слой (1) выше</div>   <div class="lay2">Этот слой (2) ниже</div>    <p>Вариант два</p>   <div class="lay3">Этот слой (3) ниже</div>   <div class="lay4">Этот слой (4) выше</div>   </body> </html>

Результат

Свойство z-index

Объектная модель

[window.]document.getElementById("elementID").style.zIndex

Браузеры

IE 6 всегда отображается поверх других элементов список <select>, даже при использовании значения z-index.

IE до восьмой версии не понимает значение inherit, а значение auto воспринимает как 0.

Firefox (до версии 2.0) при значении z-index равное отрицательному, элемент располагает ниже фона веб-страницы и его контента.

Список свойств