Usando il posizionamento relativo o quello assoluto è possibile che due blocchi vengano ad essere sovrapposti. Si consideri il codice seguente:
che produce la seguente visualizzazione:
Il BOX 1 sta sotto il box 2.
Abbiamo posizionato il box 2 in modo che si sovrapponesse al box 1.
Come puoi notare il BOX 2 si trova sopra il box 1.
In assenza di altre indicazioni, l'elemento che viene dopo nel flusso della pagina (in questo caso il secondo) si sovrappone sempre a quello precedente (cioè il primo blocco nel nostro esempio).
Tuttavia questo comportamento può essere modificato agendo sulla proprietà z-index. Tale proprietà può assumere solo valori interi positivi o negativi: per default il valore di z-index è zero per tutti gli elementi. Se viene specificato z-index, l'elemento con z-index maggiore passa davanti a quello con z-index minore. Si consideri la seguente piccola modifica al codice precedente:
Come si vede abbiamo messo z-index del secondo blocco a -1. Ricordiamo che 0 è il valore di default, perciò -1 significa "spingere" il blocco verso lo sfondo. Ecco infatti il risultato che si ottiene:
Il BOX 1 adesso sta sopra il box 2.
Abbiamo modificato z-index di box 1 in modo che si venga a sovrapporre a box 2.
Come puoi notare il BOX 2 si trova sopra il box 1.
Non c'è limite al numero di blocchi che si possono impilare usando la proprietà z-index, come mostra l'esempio seguente:
Il BOX 1 sta sotto il box 2.
Abbiamo posizionato il box 2 in modo che si sovrapponesse al box 1.
Come puoi notare il BOX 2 si trova sopra il box 1.
Come puoi notare il BOX 3 si trova sotto gli altri due box.
Il codice corrispondente è questo:
ATTENZIONE:
La proprietà z-index può essere applicata solo ai blocchi per cui è stata indicata una proprietà position (diversa da static). Nel nostro caso usare la proprietà z-index sul blocco 1 non avrebbe funzionato, dal momento che questo non è stato posizionato.
Sito realizzato in base al template offerto da
http://www.graphixmania.it