Articolo completo su CSS.FlepStudio.
Ritorna alla lista degli articoli css su Onsitus.it.
La proprietà css z-index permette di cambiare l'ordine di sovrapposizione degli elementi.
Richiede un valore numerico e per essere applicabile l'elemento stesso deve essere posizionato in modo assoluto o relativo.
Esempio:
Il risultato:
L'HTML usato:
<div id="gallery">
<a href="#" id="img1"></a>
<a href="#" id="img2"></a>
<a href="#" id="img3"></a>
<a href="#" id="img4"></a>
<a href="#" id="img5"></a>
<a href="#" id="img6"></a>
<a href="#" id="img7"></a>
<a href="#" id="img8"></a>
<a href="#" id="img9"></a>
</div>
Regole css usate:
#gallery{
width: 570px;
height: 200px;
background-color: black;
position: relative; /*per potere applicare la position:absolute; a suoi elementi*/
}
#gallery a{
display: block;
width: 200px;
height: 150px;
position: absolute; /*altro che per posizionare e richiesto per applicare il z-index*/
background-color: white;
padding: 5px;
margin-top: 20px;
}
#gallery a:hover{
border: 0px solid black; /*fix per Internet Explorer. Senza, il cambio di z-index sullo stato hover è ignorato*/
z-index: 100; /*profondità superiore a tutte*/
}
/*immagine di sfondo per ogni link e z-index dicrescente*/
#img1{
background: url(1.jpg) no-repeat center;
left: 20px;
z-index: 9;
}
#img2{
background: url(2.jpg) no-repeat center;
left: 60px;
z-index: 8;
}
#img3{
background: url(3.jpg) no-repeat center;
left: 100px;
z-index: 7;
}
#img4{
background: url(4.jpg) no-repeat center;
left: 140px;
z-index: 6;
}
#img5{
background: url(5.jpg) no-repeat center;
left: 180px;
z-index: 5;
}
#img6{
background: url(6.jpg) no-repeat center;
left: 220px;
z-index: 4;
}
#img7{
background: url(7.jpg) no-repeat center;
left: 260px;
z-index: 3;
}
#img8{
background: url(8.jpg) no-repeat center;
left: 300px;
z-index: 2;
}
#img9{
background: url(9.jpg) no-repeat center;
left: 340px;
z-index: 1;
}