Z-index

Несмотря на то, что экран монитора плоский, позиционированным элементам можно задать и 3ю размерность, то есть расположить их в порядке стека.

По умолчанию всем позиционируемым элементам присваиваются номера в порядке их появления 0,1,2... Номер выбирается по отношению к родительскому элементу и его потомкам. Эта система называется z-index. Номер z-index элемента определяет его 3D отношение относительно других элементов окна. Если элементы накладываются, то на переднем плане будет элемент с большим z-index (есть несколько исключений, но о них позже). При равном значении z-index, на переднем плане находится тот элемент, который в коде HTML описан ниже.

Порядок элементов можно изменить, задав (через таблицу стилей, или через style=)свойство z-index. Z-index может принимать как положительное, так и отрицательное значение. Использование отрицательных значений приводит к тому что элемент смещается вниз от родительского элемента, а не вверх, как в случае с положительными значениями.  По-умолчанию z-index: auto;. Значение inherit указывает, что оно наследуется у родителя. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.

1
2
3
1
2
3
1
2
3

Рассмотрим пример выше, собственно он прост как 2*2:

<div id="test1" style="position:absolute;width:50px;height:50px;background-color:red;">1</div>
<div id="test2" style="position:absolute;width:50px;height:50px;background-color:yellow; left:25px; top:25px;">2</div>
<div id="test3" style="position:absolute;width:50px;height:50px;background-color:blue; left:50px; top:50px;">3</div>
 
<div id="test11" style="position:absolute;width:50px;height:50px;background-color:red; left:150px; z-index:10;">1</div>
<div id="test22" style="position:absolute;width:50px;height:50px;background-color:yellow; left:175px; top:25px; z-index:9;">2</div>
<div id="test33" style="position:absolute;width:50px;height:50px;background-color:blue; left:200px; top:50px;">3</div>
 
<div id="test111" style="position:absolute;width:50px;height:50px;background-color:red; left:300px; z-index:10;">1</div>
<div id="test222" style="position:absolute;width:50px;height:50px;background-color:yellow; left:325px; top:25px; z-index:9;">2</div>
<div id="test333" style="position:absolute;width:50px;height:50px;background-color:blue; left:350px; top:50px; z-index:11;">3</div>
Bесь фокус в присвоении z-index, у кого он больше тот и ближе к зрителю - наверху стека отбражения.
В первом случае вариант по-умолчанию, 2 других случая с z-index по порядку следования (10,9,auto) и (10,9,11)

Ну и напоследок внесу ложку дегтя в бочку меда.
*Список, созданный с помощью тега <select>, в браузере IE 6 всегда отображается поверх других элементов, несмотря на значение z-index.
*IE до версии 7.0 включительно не поддерживает значение inherit и интерпретирует auto как 0.
*В браузере Firefox до версии 2.0 включительно отрицательное значение z-index располагает элемент ниже фона веб-страницы и его контента.
*В IE6 z-index слою выдается на уровне родителя. Поэтому, если у родителя z-index меньше чем у соседних элементов (например элемент описан ранее в коде, чем сосед), то соседи всегда будут выше его содержимого, какой z-index не пропиши. В этом случае приходится идти по всей цепочке элементов от потомков к родителям и всем выставлять z-index, для того чтобы добиться нужного эффекта.

Вот вкратце и все, о чем хотелось рассказать о свойстве z-index, до встречи на страницах!