Тег z-index задающий последовательность расположения слоёв , с absolute , relative позицированием .

Главная страница сайта .

Тег стиля - z-index

Тег z-index задающий последовательность расположения слоёв , с absolute , relative позицированием

Примеры , подробности , детали

Пример : 6 элементов расположенными слоями с абсолютным позицированием , с последовательно возрастающими значениями тега z-index .

Слой № 1
z-index: 1

Слой № 2
z-index: 2

Слой № 3
z-index: 3

Слой № 4
z-index: 4

Слой № 5
z-index: 5

Слой № 6
z-index: 6

Те же элементы но с изменёнными значениями тега z-index .

Слой № 1
z-index: 4

Слой № 2
z-index: 5

Слой № 3
z-index: 6

Слой № 4
z-index: 2

Слой № 5
z-index: 3

Слой № 6
z-index: 1

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

Важно ! Особенность трактовки работы элементов с применением тега z-index , характерная для обозревателей Internet Explorer . Для других обозревателей ( Mozilla FireFox , Google Chrome , Safari , Opera ) данная особенность не является характерной , то есть наличие её или отсутствие , зависит от версии обозревателя . Но так как последние версии отличных от MSIE обозревателей не обладают этим фактором , будем считать что данная особенность присуща на постоянной основе только Internet Explorer . Особенность состоит в том что в случае применения " прозрачных " слоёв - элементов , то есть без применения в этих слоях тегов фонового цвета или фонового изображения ( background-color , background-image , background ) . Независимо от количества слоёв взаимно перекрывающих друг друга по площади , ссылки в ниже расположенных слоях остаются доступными для воздействия на них курсором . В обозревателях отличных от MSIE и Opera ссылки и активные элементы в ниже расположенных слоях неактивны , недоступны .

Слой № 1
favicon30.gif

Слой № 2
danger.gif

Пример : Слой № 1 , с фоном ссылки и бордюром элемента цвета aqua с тегом в примере наименьшим по значению - z-index: 1 расположен нижним слоем . Слой № 2 , с фоном ссылки и бордюром элемента цвета fuchsia с тегом в примере наибольшим по значению - z-index: 2 расположен верхним слоем . В обозревателях Internet Explorer ссылка слоя № 1 активна в любом случае , активна и под слоем № 2 .
В обозревателях отличных от MSIE ( Mozilla FireFox , Google Chrome , Safari , Opera ) ссылка слоя № 1 , левая её часть , не перекрываемая слоем № 2 - активна , а правая часть ссылки , перекрываемая слоем № 2 - неактивна . В чём можно убедиться просматривая пример разными группами обозревателей ( MSIE ) и ( Mozilla FireFox , Google Chrome , Safari , Opera ) .

При позицировании static , тег z-index при построении отображения страницы не учитывается .