CREARE SITI:divisioni sottosopra

Nell'incontro precedente si è visto che divisioni con posizione relativa possono andare a finire dietro a divisioni con posizione assoluta e in maniera non del tutto controllata. Nel caso di due divisioni posizionate in maniera assoluta con una certa sovrapposizione, la divisione definita dopo l'altra all'interno del box che le contiene entrambe assumerà la posizione superiore e coprirà in parte o del tutto la prima.

Vediamo cosa succede esattamente con un esempio.
Scriviamo il codice riportato in figura in cui si vede che la divisione di classe assoluto_2 (gialla) è definita dopo quella di classe assoluto_1 (verde).

Come risultato si vede che la divisione gialla ricopre in parte quella verde perché i due box sono parzialmente sovrapposti (come si può vedere dalle definizioni di stile) e assoluto_2 è stata definita dopo (e quindi prevale).

Se scambiamo l'ordine della definizione all'interno di body la divisione verde copre in parte la gialla.

Indubbiamente basarsi sull'ordine di definizione può risultare veramente poco pratico (specie se i box sono molti e vogliamo creare degli effetti di sovrapposizione). Come possiamo fare?

Definizione della "quota"

Per definire la quota relativa dei vari box, il linguaggio mette a disposizione una definizione di stile specifica, detta z-index. L'uso è indicato nell'esempio riportato nelle due figure seguenti.

I box con z-index superiori si colollocano sopra a quelli con z-index inferiori. Di solito si preferisce non usare indici contigui per poter successivamente inserire dei livelli intermedi. Nell'esempio ho usato i livelli 5 e 10.

ARRIVEDERCI

***

INDICE