Assegnare la proprietà Z-Index ai div mediante i CSS. Organizzare l’ordine di sovrapposizione tra diversi elementi all'interno della pagina web

La definizione dello z-index stabilisce quale elemento deve stare sugli altri quando c'è sovrapposizione. Partiamo col dire che un numero maggiore attribuito allo z-index si troverà più su rispetto ad uno con un numero minore; cioè starà "più vicino a noi" nella ipotetica distanza tra i nostri occhi e lo schermo. Si veda questo primo file di esempio. Ogni <div> è stato posizionato in maniera assoluta avendo come riferimento l' angolo in alto a sinistra dell' elemento contenitore, in questo caso <body>, che corrisponde al nostro punto zero. Non è stato dichiarato nessun "asse z" per il momento. Ecco il codice di un <body> che, per motivi di visibilità ottimale, è stato alternato solo nel colore di sfondo con gli altri.

div#uno {
position: absolute;
top: 10px;
left: 10px;
padding: 10px;
background-color: #f60;
border: 1px solid #000;
width: 30%;
}

Tutti e quattro i box, appartenenti all' elemento <body>, sono state posizionati dal basso verso l' alto, così come si vede nel file di esempio. Nel prossimo file è stato dichiarato un "numero" per lo Z; i box con i valori dello Z più alti appariranno più vicini ai nostro occhi. Ecco il file di esempio. Quello che prima era il box più in basso (sotto tutti gli altri), cioè il n° 1, adesso viene visualizzato per primo; ad esso è stato dato lo z-index più alto, cioè 4. Nel prossimo esempio, invece, ho cambiato il numero dello z-index della gabbia n° 2; le ho assegnato un numero molto alto, cioè: 100; e questo è il file di esempio. Anche se avessi dato un numero pari a 5 il risultato sarebbe stato lo stesso; si sarebbe visto il box n° 2 sempre più vicino ai nostri occhi.

Ricordarsi quindi che: i <div> appartengono allo stesso contenitore fino a quando abbiamo uno z-index diverso per ogni gabbia; in quel caso sarà più vicina ai nostri occhi quella gabbia che ha lo z-index più alto.

Quando ci sono contenitori diversi, le cose cambiano. Lo z-index di un <div> è collegato ai suoi fratelli. Figli di genitori diversi si sovrappongono; non è il loro z-index individuale che decide, ma quello dei loro genitori. Come ultimo esempio di quanto scritto, si veda il seguente esempio. Il box n° 2, nonostante abbia uno z-index alto rispetto agli altri, si trova sotto il box n° 3: come mai? In questo caso il suo genitore non è il contenitore <html> ma è il box n° 1. Ecco il codice:

<div id="uno">1<div id="due">2</div></div>

La disposizione delle gabbie con lo z-index è un concetto abbastanza semplice, ma si possono creare delle confusioni quando si cerca di assegnarne uno all' interno dei layout con i soli CSS. In seguito vedremo qualche semplice esempio di costruzione di gabbie all' interno di una pagina web.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati