Il livello superiore si trova sopra il relativo document nell'area visibile del browser e a ogni document è associato un livello superiore. Ciò significa che gli elementi promossi nel livello superiore non devono preoccuparsi della gerarchia z-index o DOM. Hanno anche un bellissimo pseudo-elemento ::backdrop con cui giocare. La specifica dell'API Fullscreen fornisce ulteriori dettagli, in quanto Fullscreen era un ottimo esempio del livello superiore in uso prima dell'arrivo del supporto dialog.
Il livello superiore consente di risolvere il problema di rendering dei contenuti sopra il resto di document.
Aspetti importanti da ricordare:
- Il livello superiore è al di fuori del flusso document.
- z-index non ha alcun effetto nel livello superiore.
- Ogni elemento nel livello superiore ha uno pseudo-elemento ::backdrop stilibile.
- Ogni elemento e ::backdrop genera un nuovo contesto di sovrapposizione.
- Gli elementi nel livello superiore vengono impilati nell'ordine in cui appaiono nell'insieme. L'ultimo in, viene visualizzato in alto. Se vuoi promuovere un elemento, rimuovilo e aggiungilo di nuovo.
In che modo abbiamo imitato il livello superiore fino ad ora? Non è raro vedere che gli sviluppatori lascino un elemento container vuoto alla fine di body. E poi verrà usato come un "falso" livello superiore. L'idea è che il container venga posizionato sopra tutti gli altri elementi nell'elenco. Quando vuoi promuovere un elemento prima di tutto, aggiungilo al contenitore. Possiamo vedere questo comportamento in pacchetti popolari come SweetAlert, reactjs-popup, Magnific Popup e altri.
Con i nuovi componenti integrati e le nuove API come <dialog> e "Popover", non dovrai ricorrere a queste soluzioni alternative. Puoi promuovere i contenuti nel livello superiore.
I framework dell'interfaccia utente ci consentono di collocare insieme gli elementi promossi con le relative controparti dei componenti. Tuttavia, per quanto riguarda il rendering, spesso vengono separati nel DOM.
Utilizzando il livello superiore, gli elementi sponsorizzati sono il punto in cui li inserisci nel codice sorgente (ad esempio, un <dialog>). Non importa da quanti livelli si trova l'elemento nel DOM. Verrà promosso al livello superiore e potrai controllarlo dove previsto, posizionato insieme al codice HTML del tuo componente. In questo modo è più semplice esaminare contemporaneamente sia l'elemento trigger sia l'elemento promosso nel DOM. Ciò è particolarmente utile, ad esempio, se l'elemento trigger aggiorna gli attributi. Questo approccio offre anche un ulteriore vantaggio per l'accessibilità, ora che gli elementi sono nella stessa posizione.
Considera questa demo per illustrare il livello superiore rispetto a quello alto z-index.
In questa demo puoi aprire un popup SweetAlert e anche un livello superiore <dialog>. Apri <dialog> e prova ad aprire il popup SweetAlert. Verrà visualizzato sotto l'elemento del livello superiore. E la radice del popup SweetAlert utilizza un valore z-index pari a 10000 con position: fixed.
.swal-overlay {
z-index: 10000;
position: fixed;
}
Non è necessario applicare stili a <dialog> per far sì che venga visualizzato sopra tutti gli altri contenuti.
DevTools
E questo ci porta al supporto di DevTools. Chrome DevTools sta aggiungendo il supporto per gli elementi del livello superiore, in modo da poter esaminare il livello superiore. In questo modo è più semplice eseguire il debug e visualizzare il posizionamento degli elementi nel livello superiore o persino nel livello superiore.
Alina Varkki ha pubblicato un ottimo articolo che spiega in dettaglio l'utilizzo di questi strumenti. Sono attualmente disponibili come funzionalità in anteprima nella versione 105 di Chrome Canary.
È tutto!
Una breve introduzione al livello superiore. Possibilità di dire "ciao!" ad esempio:
.popup-container {
z-index: 10000;
}
Che cosa inseriresti nel livello superiore? Hai provato dialog? Oppure hai provato l'API OpenUI Popover? Facci sapere.