Css свойство z-index — вся правда

Css свойство z-index не похоже на какие-либо другие css свойства. Многие разработчики, сталкиваясь с ним, приходили в замешательство из-за не правильного использования. Однако, когда вы поближе познакомитесь с z-index, вы поймете, что это свойство очень простое и предлагает эффективный метод решения многих задач верстки.

Начнем наш пост со знакомства. Свойство z-index определяет уровень стека html-элемента. «Уровень стека» обозначает позицию элемента на оси Z, направленную перпендикулярно оси X и оси Y. Элемент, которому назначено самое большое значение z-index, располагается в самом верху стека.

Если сначала не все понятно, то думаю после просмотра 3D представления «уровня стека» (оси Z) станет более понятно:

Обычный порядок стека или порядок элементов на оси Z, определяет ряд факторов. Далее предоставлен список, отображающий порядок, в котором элементы укладываются в стек, начиная снизу:

1. Фон и рамка элемента, создающие контекст стека
2. Элементы с отрицательным контекстом стека, в порядке появления
3. Не позиционированные, не плавающие, блочные элементы, в порядке появления
4. Не позиционированные, плавающие элементы, в порядке появления
5. Строчные элементы, в порядке появления
6. Позиционированные элементы, в порядке появления

Этим трем блокам не назначен z-index.

Все секреты или почему появляется путаница?
Весь смысл свойства z-index заключается в том, чтобы изменять обычный порядок стека, но при неправильном использовании, оно может привести в заблуждение. Это заблуждение появляется потому, что свойство z-index будет работать только у элементов, которые имеют свойство position с одним из трех значений: fixed, relative или absolute.

Использование
Свойство z-index может влиять на порядок элементов как у блочных, так и у строчных элементов, и устанавливается назначением положительного или отрицательного целого значения, или значения auto. Значение auto определяет элементу такой же порядок слоев, как у родительского элемента.

Пример:


#box{
position:relative;z-index:100;
}

На примере покажу как можно при помощи z-index поменять обычный порядок элементов с теми же блоками, как и в первом примере:

Красиво, просто, но при определенных обстоятельствах, в таких браузерах как IE6 и Firefox 2, свойство z-index может обрабатываться по-разному.

IE6: Даешь элементу select больше приоритета!
Дело в том, что такой чудесный браузер как IE6 ни в какую не хочет отображать элемент <select> ЗА каким-либо другим элементом. Даже при использовании z-index, все равно <select> отображается поверх всего. На данный момент мне известно всего два варианта решения: с использованием iframe и с использованием javascript.

С использованием iframe:


<div id="block4">
<IFRAME class="block4frame" scrolling="no" frameborder="0"></IFRAME>
Текст блока
</div>
<select name="nameSelect">
<option value="1">название</option>
<option value="1">название</option>
<option value="1">название</option>
<option value="1">название</option>
<option value="1">название</option>
</select>


При помощи javascript:
Я не буду показывать вам пример, потому что реализация довольно таки простая и действенная. Вы просто прячьте элемент <select> (например display:none) когда блок, который должен отображаться поверх, появляется на странице. Такое решение подойдет для реализации выпадающего меню и popup.

Firefox 2: Что такое отрицательное значение? Аа?
Вот ведь. А firefox 2 тоже имеет свой недостаток. Хоть его и убрали с поддержки со стороны разработчиков, все же напомню, что forefox 2 не работает с отрицательными значениями z-index и ничего с этим поделать нельзя.

Ну вот. Такое страшное и неведанное css свойство z-index кажется таким простым. Надеюсь, я ничего не упустил. Если вам известны еще какие-то проблемы с z-index, милости прошу в комментарии, потому что я в своей практике с другими не встречался.
Вдохновил Louis Lazaris.