PROGRAMMIAMO
HTML - Z-index
Z-index

Usando il posizionamento relativo o quello assoluto è possibile che due blocchi vengano ad essere sovrapposti. Si consideri il codice seguente:

<p style = "width:300px; height:100px; background:#ACFA58; padding:10px;">
Il <strong>BOX 1</strong> sta sotto il box 2.<br/>
Abbiamo posizionato il box 2 in modo che si sovrapponesse al box 1.
</p>

<p style = " width:300px; height:100px; background:#ffe7bc; padding:10px; position:relative; top:-80px; left:150px;">
Come puoi notare il <strong>BOX 2</strong> si trova sopra il box 1.
</p>

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:

<p style = "width:300px; height:100px; background:#ACFA58; padding:10px;">
Il <strong>BOX 1</strong> adesso sta sopra il box 2.<br/>
Abbiamo modificato z-index di box 1 in modo che si venga a sovrapporre a box 2.
</p>

<p style = " width:300px; height:100px; background:#ffe7bc; padding:10px; position:relative; top:-80px; left:150px; z-index:-1">
Come puoi notare il <strong>BOX 2</strong> si trova sopra il box 1.
</p>

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:

<p style = "width:300px; height:100px; background:#ACFA58; padding:10px;">
Il <strong>BOX 1</strong> adesso sta sopra il box 2.<br/>
Abbiamo modificato z-index di box 1 in modo che si venga a sovrapporre a box 2.
</p>

<p style = " width:300px; height:100px; background:#ffe7bc; padding:10px; position:relative; top:-80px; left:150px; z-index:-1">
Come puoi notare il <strong>BOX 2</strong> si trova sopra il box 1.
</p>

<p style = " width:300px; height:100px; background:yellow; padding:10px; position:relative; top:-170px; left:200px; z-index:-2">
Come puoi notare il <strong>BOX 3</strong> si trova sotto gli altri due box.
</p>

 

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.

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it