Свойство z-index устанавливает положение элемента.
Свойство z-index устанавливает положение элемента на Z оси относительно остальных наложенных элементов.При наложении одних элементов на другие основную роль будет играть применяемое к ним свойство position.Числовые значения могут быть как положительными так и отрицательными,при этом чем выше значение,тем выше будет находится один элемент над другим по Z оси.Свойство применимо к элементам со свойством position,создано в версии CSS2 но проходит валидацию согласно версии CSS3.
Дополнительные свойства применяемые к z-index
Свойство | Описание |
---|
position | Позиционирует элемент дополнительными значениями |
Дополнительные значения применяемые к z-index
Значение | Описание |
---|
<Число> | Любое положительное или отрицательное число | auto | Браузер сам определит положение элемента,аналогично значению z-index:0; | inherit | Наследует значения от родителя |
Свойство работает в браузерах
    
Пример применения свойства
<!DOCTYPE html> <html lang="ru"> <head> <title>Свойство z-index</title> <style type="text/css"> <!-- .one { position:relative; z-index:1; top:0; left:0; width:300px; height:100px; color:white; background:indigo; text-align:center; } .two { position:absolute; z-index:2; top:40px; left:40px; width:300px; height:100px; color:red; background:green; text-align:center; } .tree { position:fixed; z-index:3; top:80px; left:80px; width:300px; height:100px; color:orange; background:blue; text-align:center; } --> </style> </head> <body> <div class="one">z-index & relative</div> <div class="two">z-index & absolute</div> <div class="tree">z-index & fixed</div> </body> </html>
Пример в действии
Генератор свойства z-index
Поэкспериментируйте сами
Вопросов / Советов / Предложений - относящихся к материалу: 0
|
|
|
|
|
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ]
|