Come posizionare e stabilire l'ordine di sovrapposizione tra oggetti HTML.

Come determinare l'ordine di sovrapposizione di più oggetti HTML mediante i tag z-index

La posizione di un elemento all'interno di una pagina web è determinata dalla proprietà position e può essere applicata generalmente a tutti gli oggetti. I valori che può assumere position sono:

1) static - E' la posizione normale ed è quella di default che assume un elemento senza la proprietà position

2) absolute - In questo caso l'elemento viene posizionato in funzione del suo contenitore più prossimo che abbia un valore diverso da static. Se questo elemento non c'è, allora la posizione coincide con l'area del browser. Si usano gli attributi top, bottom, left e right per fissare le distanze nelle quattro direzioni.

3) fixed - La differenza con absolute sta nel fatto che in questo caso il contenitore è sempre la finestra principale del browser. Un'altra particolarità di questo valore è che l'oggetto non scorre insieme alla pagina
4) relative - L'elemento viene posizionato in funzione del suo contenitore. Gli spostamenti ottenuti tramite left, right, top e bottom sono non in funzione della pagina web ma in relazione al contenitore dell'elemento.

Facciamo un esempio pratico. Questo codice

<div style="position: relative; width:300px; height: 100px; border: 3px solid #003366;">   <div style="position: absolute; width:50px; height: 50px; left:30px; top:10px; border: 2px solid #940F04;"> CIAO </div>
</div>

produce questo risultato

CIAO

Che mostra come il quadrato si sia posizionato in relazione al rettangolo che è anche il suo contenitore. Gli altri parametri che riguardano il testo, i colori e lo stile dei bordi sono stati inseriti per dare una idea più completa del funzionamento di questa proprietà CSS. E' sufficiente usare due riferimenti direzionali (esempio left e top) per posizionare in modo univoco un elemento. Si possono inserire anche più elementi all'interno dello stesso contenitore, ciascuno con la sua posizione. In questo caso ci potrebbero essere delle sovrapposizioni. Per esempio questo codice

<div style="position: relative; width:300px; height: 200px;border: 2px solid #940F04;">
  <div style="position: absolute;width:80px; height: 80px; left:30px; top:10px;background:yellow;"></div>
<div style="position: absolute;width:80px; height: 80px; left:100px; top:60px;background:black;"></div> <div style="position: absolute;width:80px; height: 80px; left:150px; top:90px;background:green;"></div> </div>

produce questo risultato

Si può notare come il secondo quadrato copra il primo e il terzo copra il secondo. Si può fare in modo di cambiare l'ordine naturale della sovrapposizione degli elementi mediante la proprietà z-index. Tale attributo può essere utilizzato per creare un contenitore di un elemento che vogliamo sempre in primo piano rispetto agli altri come per esempio può essere un menù a tendina per evitare che finisca sotto a oggetti in flash o sotto annunci pubblicitari. Nell'esempio di codice appena visto possiamo cambiare l'ordine di sovrapposizione inserendo il valore di z-index per ciascun elemento. Uno z-index più elevato significa sovrapporsi a un altro elemento con uno z-index più basso. Questo codice

<div style="position: relative; width:300px; height: 200px;border: 2px solid #940F04;">
  <div style="position: absolute;width:80px; height: 80px; left:30px; top:10px;background:yellow; z-index:1;"></div>
<div style="position: absolute;width:80px; height: 80px; left:100px; top:60px;background:black; z-index:3;"></div>
<div style="position: absolute;width:80px; height: 80px; left:150px; top:90px;background:green; z-index:2;"></div>
</div>

produce quest'altro risultato

dove si nota che il quadrato con z-index:3 si sovrappone agli altri due. Molto spesso nei modelli è inserito un CSS per far sempre sovrapporre un elemento quando questo è puntato con il mouse. Viene usato un codice simile a questo

#nomeclasse a:hover {
z-index:100;
}

in modo da tenerlo sempre in evidenza rispetto agli altri elementi visto che viene inserito a un livello 100. La proprietà z-index viene anche definita come il valore per determinare la profondità di un oggetto. Diciamo che se position dà dei dati per il posizionamento bidimensionale, z-index incide su quella che possiamo chiamare la terza dimensione.