Третье измерение: атрибут z_index

Мы видели, что с помощью атрибутов left, top, right и bottom можно задавать ко_ ординаты X и Y элементов внутри двухмерной плоскости элемента контейнера. Атрибут z_index определяет что_то вроде третьего измерения – он позволяет за_ дать порядок наложения элементов, указывая, какой из перекрывающихся эле_ ментов расположится поверх других. Атрибут z_index представляет собой целое число. По умолчанию его значение равно нулю, но можно задавать положитель_ ные и отрицательные значения. Когда два или более элементов перекрываются, они прорисовываются в порядке от наименьшего к наибольшему значению z_in_ dex, т. е. элемент с наибольшим значением z_index перекрывает все остальные. Если перекрывающиеся элементы имеют одинаковое значение z_index, они про_ рисовываются в том порядке, в котором присутствуют в документе, поэтому на_ верху оказывается последний из перекрывающихся элементов.

Обратите внимание: порядок наложения определяется значением z_index только для смежных элементов (т. е. для дочерних элементов одного контейнера). Если перекрываются два несмежных элемента, то на основе индивидуальных значе_ ний атрибутов z_index нельзя указать, какой из них находится сверху. Вместо этого надо задать атрибут z_index для двух смежных контейнеров двух перекры_ вающихся элементов.

Непозиционируемые элементы (т. е. элементы с используемым по умолчанию режимом позиционирования position:static) всегда размещаются способом, не допускающим перекрытий, поэтому к ним атрибут z_index не применяется. Тем не менее для них значение z_index по умолчанию равно нулю, т. е. позициони_ руемые элементы с положительным значением z_index перекрывают обычный поток вывода документа, а позиционируемые элементы с отрицательным значе_ нием z_index оказываются перекрытыми обычным потоком вывода документа.

И наконец, следует отметить, что некоторые броузеры не учитывают атрибут z_ index, когда он применяется к тегам <iframe>, в результате встраиваемые фреймы располагаются поверх других элементов, независимо от указанного порядка на_ ложения. Такие же неприятности могут быть и с другими «оконными» элемен_ тами, например с меню <select>. Старые броузеры могут отображать все элемен_ ты управления форм поверх абсолютно позиционируемых элементов независи_ мо от значений z_index.