Својство z-index
Својство z-index поставља, ко
ће бити на врху у случају да се неколико елемената
наслажу један преко другог.
Синтакса
селектор {
z-index: број | auto;
}
Број мора бити цео, позитиван или негативан. Може бити нула.
Вредности
| Вредност | Опис |
|---|---|
| Број |
Цео број задаје редослед наслаживања елемената:
при наслаживању елемената једног преко другог на врху
ће се наћи онај, чији је z-index већи.
|
auto |
Редослед наслаживања се гради аутоматски: изнад ће бити онај елемент, који се налази ниже у HTML коду. |
Подразумевана вредност: auto.
Пример
У овом примеру блокови ће се наслаживати
један преко другог по реду њиховог слеђења у HTML
коду (z-index није задат и имаће
подразумевану вредност - auto). Први
блок ће бити на самом дну (црвени), а последњи
- изнад свих (зелени):
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
#div1 {
position: absolute;
top: 30px;
left: 30px;
width: 50px;
height: 50px;
background: red;
}
#div2 {
position: absolute;
top: 60px;
left: 60px;
width: 50px;
height: 50px;
background: blue;
}
#div3 {
position: absolute;
top: 90px;
left: 90px;
width: 50px;
height: 50px;
background: green;
}
:
Пример
Променимо редослед наслаживања, задавши z-index.
Црвеном блоку - 3, плавом - 2,
зеленом - 1. Редослед наслаживања ће се променити
на обрнут (изнад свих ће бити блок са z-index
3):
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
#div1 {
position: absolute;
top: 30px;
left: 30px;
width: 50px;
height: 50px;
background: red;
z-index: 3;
}
#div2 {
position: absolute;
top: 60px;
left: 60px;
width: 50px;
height: 50px;
background: blue;
z-index: 2;
}
#div3 {
position: absolute;
top: 90px;
left: 90px;
width: 50px;
height: 50px;
background: green;
z-index: 1;
}
: