Share
Il z-index la proprietà in CSS sembra abbastanza semplice, ma c'è molto da scoprire sotto la superficie se vuoi veramente capire come funziona. In questo tutorial chiariremo il funzionamento interno di z-index, osservando contesti di impilamento e alcuni esempi pratici.
I CSS forniscono tre diversi schemi di posizionamento per il layout delle scatole:
L'ultimo rimuove completamente un elemento dal flusso normale e si affida allo sviluppatore per indicare all'elemento dove visualizzare.
Gli dai valori in alto, a sinistra, in basso ea destra per posizionare l'elemento nello spazio bidimensionale, ma i CSS ti consentono anche di inserirlo nella terza dimensione usando la proprietà z-index.
In superficie, z-index sembra una proprietà facile da usare. Si impostano i valori per determinare dove su questo terzo asse verrà posizionato l'elemento e il gioco è fatto. Sotto la superficie ci sono molte altre cose da approfondire, tra cui una serie di regole per i quali tipi di elementi si sovrappongono agli altri.
Iniziamo con le nozioni di base per assicurarci che siamo tutti sulla stessa pagina e poi parleremo dello stacking per capire meglio cosa sta succedendo con z-index dietro le quinte.
Sono sicuro che tu abbia familiarità con lo spazio delle coordinate tridimensionali. Abbiamo un asse x che viene tipicamente usato per rappresentare l'orizzontale, un asse y per rappresentare la verticale e un asse z usato per rappresentare ciò che accade dentro e fuori la pagina, o lo schermo nel nostro caso.
Noi non letteralmente vedere l'asse z, in quanto lo schermo è un piano bidimensionale. Lo vediamo sotto forma di prospettiva e di alcuni elementi che appaiono davanti o dietro altri elementi quando condividono lo stesso spazio bidimensionale.
Per determinare dove si trova un elemento lungo questo terzo asse, il CSS ci consente di impostare tre valori sulla proprietà z-index.
Per il momento concentriamoci sul valore intero. Questo può essere positivo, negativo o 0. Maggiore è il valore, più vicino al visualizzatore appare l'elemento. Più basso è il valore, più lontano appare.
Se due elementi sono posizionati in modo da occupare entrambi un'area condivisa dello spazio bidimensionale, l'elemento con il maggiore indice z oscurerà o occlude l'elemento con l'indice z inferiore nelle aree in cui condividono lo spazio.
Suppongo che quanto sopra sia abbastanza facile da comprendere e molto probabilmente si comporta esattamente come ci si aspetta. Tuttavia, ci sono alcune domande senza risposta in giro.
Per rispondere a queste domande è necessario comprendere meglio come funziona z-index, in particolare l'idea di impilare contesti, livelli di impilamento e ordini di impilamento.
I contesti impilabili e i livelli di impilamento possono essere un po 'difficili da concettualizzare, quindi per un momento, immagina un tavolo con un mucchio di oggetti seduti sopra di esso. La tabella rappresenta un contesto di impilamento. Se c'è una seconda tabella accanto alla prima, rappresenta un altro contesto di impilamento.
Ora immagina sul primo tavolo ci sono quattro piccoli blocchi, tutti direttamente seduti sul tavolo. In cima a questi quattro blocchi c'è una lastra di vetro e sopra il piatto di vetro c'è una ciotola di frutta. I blocchi, la lastra di vetro e la ciotola di frutta rappresentano ciascuno un diverso livello di impilamento all'interno del contesto di impilamento che è la tabella.
Viene creato un singolo contesto di stacking predefinito per ogni pagina Web. La radice di questo contesto (la tabella) è il html elemento. Tutto all'interno del tag html si trova su un livello di impilamento all'interno di questo contesto di impilamento predefinito (oggetti che si trovano sul tavolo).
Quando assegni un valore z-index diverso da auto a un elemento, crei un nuovo contesto di impilamento con nuovi livelli di impilamento indipendenti da altri contesti di impilamento e livelli di impilamento nella pagina. Si porta un altro tavolo nella stanza per gli oggetti su cui sedersi.
Il modo più semplice per capire l'ordine di impilamento è con un semplice esempio, così semplice che non considereremo nemmeno gli elementi posizionati per un momento.
Pensa a una pagina Web molto semplice. Altro che predefinito Cosa ti aspetti di vedere quando carichi la pagina? Speriamo che non ci sia voluto molto per immaginare una schermata prevalentemente blu ad eccezione di un blocco di colore rosso che ha le dimensioni impostate per la larghezza e l'altezza del div. Il blocco rosso è probabilmente nella parte in alto a sinistra della pagina, a meno che non lasci che la tua immaginazione si scateni un po 'e ti dà più css per visualizzarla da qualche altra parte. Potresti pensare "quindi cosa, è stato abbastanza ovvio", ma quello che potrebbe non essere così ovvio è perché vedi un blocco rosso su uno sfondo blu. Perché vedi il div in cima all'elemento html? Il motivo è perché entrambi seguono le regole dell'ordine di impilamento. Nel caso di questo semplice esempio, le regole dicono che i blocchi discendenti nel flusso normale (il div) si trovano su un livello superiore rispetto agli sfondi e ai bordi dell'elemento radice (l'elemento html). Vedete il div in alto perché si trova su un livello di stack più alto. Mentre l'esempio sopra contiene solo uno stack a due livelli, ci sono sette possibili livelli su ciascun contesto di impilamento, che sono elencati di seguito. Questi sette livelli formano le regole dell'ordine di sovrapposizione. Un elemento al livello sette verrà visualizzato sopra (più vicino al visualizzatore) rispetto agli elementi nei livelli da 1 a 6. Un elemento al livello cinque viene visualizzato sopra un elemento al livello due. Un elemento su ... beh, hai capito. La prima volta che ho incontrato le regole di ordine di sovrapposizione sopra, alcune cose mi hanno colpito. Se si guardano solo i livelli due, sei e sette (quelli in cui viene menzionato z-index), ciò si adatta a ciò che si presume probabilmente su z-index. Lo z-index positivo è ad un livello più alto di 0 z-index, che è ad un livello più alto dello Z-index negativo. Probabilmente è qui che molti di noi smettono di pensare a tutti questi strati di impilamento. Prima di queste regole avrei assunto che tutto il resto fosse equivalente a un indice z di 0. Chiaramente non è così. In realtà la maggior parte di tutto si trova ad un livello inferiore al livello z-index = 0. Ciò che è anche interessante è che gli elementi non posizionati si trovano in quattro diversi livelli di accatastamento. Ha senso quando ci pensi sopra. Se tutti gli elementi non posizionati si trovassero allo stesso livello di impilamento, non vedremmo il testo (riquadro in linea) sopra un div (riquadro a livello di blocco). Un paio di volte ho menzionato la creazione di nuovi contesti di stacking. Quando assegni un valore z-index diverso da Ripensiamo alle tabelle come a contesti impilabili. Prima avevamo un tavolo e in cima al tavolo c'erano quattro blocchi, un piatto di vetro e un portafrutta. Immaginate che il secondo tavolo che abbiamo presentato abbia anche quattro blocchi della stessa dimensione e un piatto di vetro in cima, ma senza fruttiera. Ti aspetteresti che la ciotola di frutta dal tavolo uno sia l'oggetto più alto nella stanza. Si trova al più alto livello (ha il più grande z-index). Che cosa succederebbe se spostassimo il tavolo uno e tutto sopra il piano interrato? Quella ciotola di frutta sarebbe ora più bassa di quella del secondo tavolo, perché il tavolo uno è stato spostato a un livello inferiore alla tabella due. La stessa cosa accade con gli elementi posizionati su una pagina web. Considera la marcatura e lo stile sotto. Volontà HTML: CSS: Anche se div.two ha il maggiore indice z (100), in realtà si trova sotto div.four (z-index = 50) sulla pagina. Puoi vedere il risultato del codice sopra nell'immagine qui sotto. I bordi nero e giallo mostrano i diversi contesti di impilamento in cui si trova ogni elemento. Poiché div.two è contenuto in div.one, il suo indice z è relativo a Quello che abbiamo fatto è stato spostato Se sei come me, questo probabilmente ti ha inciampato una volta o due quando lavori con z-index. Speriamo che questi esempi aiutino a chiarire perché un elemento con uno z-index maggiore a volte finisca per essere visualizzato dietro un altro elemento con uno z-index più basso. Quando lo incontri per la prima volta, la proprietà z-index sembra una proprietà molto semplice da capire. I valori rappresentano una posizione su un asse dentro e fuori lo schermo, e questo è tutto. Uno sguardo più approfondito a z-index rivela che c'è un po 'di più dietro le quinte. Esistono contesti di impilamento, livelli di impilamento e regole per determinare quale elemento viene visualizzato più in alto o più in basso nell'ordine di sovrapposizione. Gli elementi posizionati possono creare nuovi contesti di impilamento e interi livelli di impilamento verranno visualizzati sopra o sotto tutti i livelli in un altro contesto di impilamento., , , ecc. Troverete su ogni pagina web c'è un singolo
I sette livelli in un contesto di impilamento
Mettere tutto insieme
auto a un elemento si crea un nuovo contesto di impilamento, indipendente da altri contesti di impilamento.div.two mostra sopra o sotto div.four?div larghezza: 200px; altezza: 200 px; imbottitura: 20px; .one, .two, .three, .four position: absolute; .one background: # f00; contorni: 5px solid # 000; in alto: 100 px; a sinistra: 200 px; z-index: 10; .two background: # 0f0; contorni: 5px solid # 000; top: 50px; a sinistra: 75 px; z-index: 100; .three background: # 0ff; contorni: 5px solid # 000; top: 125px; a sinistra: 25px; z-index: 150; .four background: # 00f; outline: 5px solid # ff0; superiore: 200 px; a sinistra: 350 px; z-index: 50;
div.onelo stack. In effetti quello che abbiamo veramente è il seguente:
div.one e tutto ciò che contiene sotto div.four. Indipendentemente dai valori impostati sulla proprietà z-index degli elementi interni div.one verranno sempre visualizzati di seguito div.four.
Conclusione
Ulteriori letture
Accentsconagua