Abbiamo visto come, attraverso i CSS, possiamo gestire ogni aspetto della presentazione degli elementi della pagina; nella precedenti lezioni abbiamo imparato manipolare la proprietà display e come posizionare gli elementi nella pagina. In questa lezione vedremo come gestire un aspetto particolare del rapporto tra i vari elementi della pagina, cioè le eventuali sovrapposizioni.
La sovrapposizione tra elementi della pagina è una eventualità che può verificarsi solo se è stata utilizzata la proprietà position, in caso contrario, infatti, la logica sequenziale di posizionamento naturale dei vari elementi della pagina rende impossibile questa eventualità.
Ma quando due elementi entrano in collisione? semplicemente quando occupano, in parte o in toto, la medesima porzione di pagina. Al fine di risolvere una similue situazione si introduce, all’interno di un contesto bidimensionale, una terza dimensione: la profondità!
La profondità è gestita mediante l’asse "z", il quale si aggiunge a "x" e "y" che rappresentano, rispettivamente, l’asse orizzontale e quello verticale della nostra pagina. Il posizionamento lungo questo terzo asse (z) è gestito mediante la proprietà z-index.
Il funzionamento di z-index è molto semplice: l’elemento col valore numerico maggiore si sovrappone a quelli con valori minori. In pratica possiamo dire che maggiore è il valore di z-index è più superficiale sarà il suo posizionamento lungo l’asse z.
Da un punto di vista teorico dobbiamo ricordare che questa proprietà può assumere i seguenti valori:
- auto – la sovrapposizione tra gli elementi è affidata al browser che si comporterà secondo regole prestabilite;
- valore numerico – gli elementi con numero maggiore di z-index sovrastano quelli con z-index minore; sono ammessi anche valori negativi.
Vediamo un esempio pratico in cui tre box, delle medesime dimensioni, si sovrappongono in modo parziale:
/* definisco il contenitore */
div.contenitore
{
position: relative;
width: 300px;
height: 300px;
}
/* definisco alcune caratteristiche comuni a tutti e tre i DIV presenti nel contenitore */
.contenitore > div
{
position: absolute;
width: 100px;
height: 100px;
}
/* posiziono il box N.1 */
div.box1
{
bottom: 0px;
right: 0px;
z-index: 0;
background-color: red;
}
/* posiziono il box N.2 */
div.box2
{
bottom: 60px;
right: 40px;
z-index: 1;
background-color: blue;
}
/* posiziono il box N.3 */
div.box3
{
bottom: 120px;
right: 80px;
z-index: 2;
background-color: yellow;
}Per meglio comprendere l’effetto di z-index abbiamo applicato, a ciascuno dei tre box, un colore di sfondo differente. Questo il risultato prodotto dal nostro codice:
Come possiamo vedere:
- il box n.3 è quello più superficiale (il suo valore di z-index è 2);
- il box n.2 (il suo valore di z-index è 1) si sovrappone al n.1 ma è sovrastato da n.3;
- il box n.1, infine, è quello più profondo in quanto ha il valore minore di z-index.
