Elementul la care se aplica z-index trebuie sa aibe setat una din pozitionarile: relative, absolute, fixed.
Valoarea maxima pt z-index depinde de browser, dar la toate poate fi si un numar cu noua cifre. Ca regula pt. maxim, sa depaseasca numarul de elemente din pagina, si sa stii cat ai setat la altele daca vrei un z-index mai mic sau mai mare decat acelea.
- Dar cu z-index nu obtii efectul dat de "position: absolute;", adica nu va fi pozitionat peste alte elemente dinaintea lui, ci dupa ele. Daca vrei sa apara peste elemente care sunt inainte si dupa, trebuie position:absolute;.
Vezi cum e in acest exemplu:
Cod: Selectaţi tot
<style>
#dv0 {
background: #d0d0fe;
}
#dv1 {
border: 1px solid #333;
background: #eee;
}
#dv1 img {
position: relative;
margin: 1px auto;
z-index: 9999;
}
#dv2 {
position: absolute;
top: 22px;
left: 1px;
width: 80%;
height: 50px;
margin: 0 auto;
background: #bbeebb;
}
</style>
<div id="dv0">Div albastru inainte de imagine.</div>
<div id="dv1">Div cu imagine position:relative; si z-index:9999;
<img src="https://marplo.net/imgs/baner.jpg" alt="MarPlo.net" />
</div>
<div id="dv2">Div position:absolute;, adaugat dupa imagine.</div>
Rezultat:
Div albastru inainte de imagine.
Div cu imagine position:relative; si z-index:9999;
Div position:absolute;, adaugat dupa imagine.