Esempio pratico di utilizzo della proprietà relative + z-index.
Di seguito viene mostrato anche il CSS completo.
Esempio:
Codice CSS:
#box-1{
position:static;
border:solid;
padding:0.4em;
width:250px;
background-color:#eee;
color: #900;
}
#box-2{
position:relative;
z-index:20;
border:solid;
padding:0.4em;
left:8em;
top:1.3em;
width:200px;
background-color:#fafafa;
color: #900;
}
#box-3{
position:relative;
z-index:10;
border:solid;
padding:0.4em;
left:0.8em;
top:-1em;
width:300px;
background-color:#fafafa;
color: #900;
}
In questo esempio abbiamo tre div: uno posizionato in modo statico e due posizionati in modo relativo.
Tramite i valori assegnati alle proprietà top e left si verifica una sovrapposizione dei blocchi box-2 e box-3. In questo caso l'ordine di sovrapposizione è determinato dal valore numerico che abbiamo attribuito alla proprietà z-index. Il numero 10 sta ad indicare che il blocco box-2 deve apparire prima del blocco box-3 poichè il div con z-index maggiore copre quello con z-index minore.