Una delle sfide quando si utilizza il posizionamento CSS per il layout di una pagina Web è che alcuni dei tuoi elementi potrebbero sovrapporsi agli altri. Funziona bene se vuoi che l'ultimo elemento dell'HTML sia in primo piano, ma cosa succede se non lo fai o se vuoi avere elementi che attualmente non si sovrappongono ad altri per farlo perché il design richiede questo aspetto "a strati" ? Per cambiare il modo in cui gli elementi si sovrappongono è necessario utilizzare la proprietà dei CSS.
Se hai usato strumenti grafici in Word e PowerPoint o un editor di immagini più robusto come Adobe Photoshop, è probabile che tu abbia visto qualcosa come z-index in azione. In questi programmi, puoi evidenziare gli oggetti che hai disegnato e scegliere un'opzione per "Invia a indietro" o "Porta in primo piano" alcuni elementi del tuo documento. In Photoshop, non hai queste funzioni, ma hai il pannello "Livello" del programma e puoi sistemare dove un elemento cade sulla tela riorganizzando questi livelli. In entrambi questi esempi, si sta essenzialmente impostando lo z-index di tali oggetti.
Cos'è l'Z-Index?
Quando si utilizza il posizionamento CSS per posizionare gli elementi sulla pagina, è necessario pensare in tre dimensioni. Ci sono le due dimensioni standard: sinistra / destra e alto / basso. L'indice da sinistra a destra è noto come x-index, mentre quello da cima a fondo è l'indice y. Questo è il modo in cui posizioneresti gli elementi orizzontalmente o verticalmente, usando questi due indici.
Quando si tratta di web design, c'è anche l'ordine di sovrapposizione della pagina. Ogni elemento della pagina può essere sovrapposto sopra o sotto qualsiasi altro elemento. La proprietà z-index determina dove è nello stack ogni elemento. Se x-index e y-index sono le linee orizzontali e verticali, allora z-index è la profondità della pagina, essenzialmente la 3a dimensione.
Pensa agli elementi di una pagina web come pezzi di carta e alla pagina stessa come a un collage. Dove si posa la carta è determinata dal posizionamento, e quanto è coperto dagli altri elementi è lo z-index.
- L'indice z è un numero, positivo (ad esempio 100) o negativo (ad esempio -100).
- L'indice z predefinito è 0.
L'elemento con lo z-index più alto è in cima, seguito dal successivo più alto e così via fino allo z-index più basso. Se due elementi hanno lo stesso valore z-index (o non è definito, ovvero utilizza il valore predefinito di 0), il browser li sovrapporterà nell'ordine in cui appaiono nell'HTML.
Come usare Z-Index
Assegna a ogni elemento desiderato nello stack un valore z-index diverso. Ad esempio, se hai cinque elementi diversi:
- elemento A - z-index di -25
- elemento B - z-index di 82
- elemento C - z-index non impostato
- elemento D - z-index di 10
- elemento E - z-index di -3
Si impileranno nel seguente ordine:
- elemento B
- elemento D
- elemento C
- elemento E
- elemento A
Si consiglia di utilizzare valori z-index molto diversi per impilare i tuoi elementi. In questo modo, se aggiungi più elementi alla pagina in un secondo momento, hai spazio per sovrapporli senza dover regolare i valori di z-index di tutti gli altri elementi. Per esempio:
- 100 per il tuo elemento più in alto
- 0 per il tuo elemento centrale
- -100 per il tuo elemento inferiore
Puoi anche dare a due elementi lo stesso valore z-index. Se questi elementi sono impilati, verranno visualizzati nell'ordine in cui sono scritti nell'HTML, con l'ultimo elemento in cima.
Una nota: per un elemento che utilizza in modo efficace la proprietà z-index, deve essere un elemento a livello di blocco o utilizzare una visualizzazione di "blocco" o "blocco in linea" nel file CSS.
