Тег z-index расположения слоёв, с absolute, relative позицированием
fon
Загружается . . . Ждите . . .
It is loaded . . . Wait . . .
Wird beladen . . . Warten Sie . . .
Es cargado . . . Esperen . . .
Est chargé . . . Attendez . . .
QR код

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

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

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

inf

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

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

Пример : 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 .
infВажно ! Особенность трактовки работы элементов с применением тега 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 при построении отображения страницы не учитывается .

Non-Commercial Use: Free Runettex_team_ESQ © 2009 - 2016 Хостинг от uCoz