Својството 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;
}
: