Die oberste Ebene befindet sich über dem zugehörigen document im Darstellungsbereich des Browsers und jeder document ist eine oberste Ebene zugeordnet. Das bedeutet, dass sich Elemente, die auf die oberste Ebene verschoben werden, nicht um die z-index- oder DOM-Hierarchie kümmern müssen. Außerdem erhalten sie ein praktisches ::backdrop-Pseudoelement, mit dem sie experimentieren können. Die Spezifikation der Fullscreen API geht ins Detail, da Fullscreen ein gutes Beispiel für die oberste Ebene war, die vor der Unterstützung von dialog genutzt wurde.
Mit der obersten Ebene lässt sich das Problem lösen, dass Inhalte über dem Rest des document gerendert werden.
Wichtige Hinweise:
– Die oberste Ebene befindet sich außerhalb des document-Ablaufs.
- z-index hat keine Auswirkung im obersten Layer.
– Jedes Element auf der obersten Ebene hat ein anpassbares ::backdrop-Pseudoelement.
– Jedes Element und ::backdrop generieren einen neuen Stapelkontext.
- Die Elemente auf der obersten Ebene werden in der Reihenfolge gestapelt, in der sie im Satz vorkommen. Das letzte Zeichen wird oben angezeigt. Wenn Sie ein Element hochstufen möchten, entfernen Sie es und fügen Sie es wieder hinzu.
Wie haben wir bisher die oberste Ebene imitiert? Es ist nicht ungewöhnlich, dass Entwickler ein leeres Containerelement am Ende von body ablegen. Dieser wird dann als "falscher" oberer Layer verwendet. Die Idee dahinter ist, dass dieser Container über allen anderen Elementen im Stack positioniert wird. Wenn Sie etwas über allem anderen hervorheben möchten, hängen Sie es an diesen Container an. Das erkennen wir an beliebten Paketen wie SweetAlert, reactjs-popup und Magnific Popup.
Bei neuen integrierten Komponenten und APIs wie <dialog> und "Popover" sind diese Behelfslösungen nicht erforderlich. Du kannst Inhalte auf der obersten Ebene platzieren.
UI-Frameworks ermöglichen es uns, beworbene Elemente zusammen mit ihren Komponenten-Gegenstücken zu platzieren. Beim Rendering werden sie jedoch häufig im DOM getrennt.
Wenn Sie die oberste Ebene verwenden, werden die heraufgestuften Elemente dort platziert, wo Sie sie in Ihrem Quellcode platzieren (z. B. <dialog>). Es spielt keine Rolle, wie viele Ebenen im DOM das Element nach unten enthält. Es wird auf die oberste Ebene hochgestuft und Sie können es dort prüfen, wo Sie es erwarten, zusammen mit dem HTML-Code Ihrer Komponente. So ist es einfacher, gleichzeitig das Triggerelement und das hochgestufte Element im DOM zu prüfen. Dies ist besonders nützlich, wenn das Triggerelement beispielsweise Attributaktualisierungen vornimmt. Dies hat auch einen zusätzlichen Vorteil für die Barrierefreiheit, da sich die Elemente jetzt am selben Standort befinden.
Diese Demo veranschaulicht die obere Ebene im Vergleich zur hohen z-index.
In dieser Demo können Sie ein SweetAlert-Pop-up öffnen und einen obersten Layer (<dialog>) öffnen. Öffnen Sie <dialog> und versuchen Sie dann, das SweetAlert-Pop-up zu öffnen. Sie werden unter dem obersten Layer-Element angezeigt. Die Wurzel unseres SweetAlert-Pop-ups ist ein z-index von 10.000 mit position: fixed.
.swal-overlay {
z-index: 10000;
position: fixed;
}
Sie müssen keine Stile auf die <dialog> anwenden, damit sie über allen anderen Inhalten angezeigt wird.
DevTools
Damit kommen wir zum Support der Entwicklertools. Die Chrome-Entwicklertools unterstützen Elemente der obersten Ebene, sodass Sie diese prüfen können. Dies erleichtert die Fehlerbehebung und die Visualisierung, wie sich die Elemente in der obersten Ebene befinden oder sich in der obersten Ebene befinden.
Alina Varkki hat einen großartigen Artikel veröffentlicht, in dem die Verwendung dieser Tools ausführlich beschrieben wird. Sie sind derzeit als Vorabversion in Chrome Canary Version 105 verfügbar.
Geschafft!
Eine kurze Einführung in den obersten Layer. So können beispielsweise „Tschüss!“ sagen:
.popup-container {
z-index: 10000;
}
Was würden Sie in die oberste Schicht übertragen? Haben Sie dialog schon ausprobiert? Oder haben Sie sich mit der OpenUI Popover API vertraut gemacht? Schreiben Sie uns!