Die oberste Ebene befindet sich im Browser-Viewport über der zugehörigen document. Jede document hat eine zugehörige oberste Ebene. Das bedeutet, dass sich Elemente, die in die oberste Ebene verschoben werden, nicht um z-index oder die DOM-Hierarchie kümmern müssen. Sie erhalten außerdem ein hübsches ::backdrop-Pseudoelement, mit dem sie spielen können. In der Spezifikation der Fullscreen API werden weitere Details erläutert, da Fullscreen ein gutes Beispiel für die oberste Schicht ist, die vor der Einführung der dialog-Unterstützung verwendet wurde.
Mit der obersten Ebene lässt sich das Problem des Renderns von Inhalten über dem Rest von document lösen.
Wichtig zu wissen:
– Die oberste Schicht befindet sich außerhalb des document-Flusses.
– z-index hat in der obersten Ebene keine Auswirkungen.
– Jedes Element in der obersten Ebene hat ein stilisierbares ::backdrop-Pseudoelement.
– Für jedes Element und ::backdrop wird ein neuer Stapelkontext generiert.
- Die Elemente in der obersten Ebene werden in der Reihenfolge gestapelt, in der sie in der Gruppe vorkommen. Das letzte in, erscheint oben. Wenn Sie ein Element hervorheben möchten, entfernen Sie es und fügen Sie es wieder hinzu.
Wie haben wir die oberste Schicht bisher nachgebildet? Es ist nicht ungewöhnlich, dass Entwickler am Ende der body ein leeres Containerelement einfügen. Diese wird dann als „falsche“ oberste Schicht verwendet. Die Idee dahinter ist, dass dieser Container über allem anderen im Stack positioniert wird. Wenn Sie etwas in den Vordergrund stellen möchten, hängen Sie es an diesen Container an. Das ist bei beliebten Paketen wie SweetAlert, reactjs-popup, Magnific Popup und anderen zu sehen.
Mit neuen integrierten Komponenten und APIs wie <dialog> und „Popover“ müssen Sie nicht mehr auf diese Umgehungslösungen zurückgreifen. Sie können Inhalte in die oberste Ebene verschieben.
Mithilfe von UI-Frameworks können wir gesponserte Elemente gemeinsam mit ihren Komponenten an einem Ort platzieren. Beim Rendern werden sie jedoch oft im DOM getrennt.
Wenn Sie die oberste Ebene verwenden, werden die Elemente an der Stelle platziert, an der sie in Ihrem Quellcode platziert werden (z. B. ein <dialog>). Dabei spielt es keine Rolle, wie viele Ebenen sich das Element im DOM befindet. Es wird auf die oberste Ebene hochgestuft und Sie können es dort, wo Sie es erwarten, im Komponenten-HTML überprüfen. So lässt sich sowohl das Trigger-Element als auch das beworbene Element im DOM gleichzeitig prüfen. Das ist besonders nützlich, wenn Ihr Triggerelement beispielsweise Attribute aktualisiert. Dies hat auch einen zusätzlichen Vorteil für die Barrierefreiheit, da sich die Elemente jetzt zusammen befinden.
Sehen Sie sich diese Demo an, um die obere Ebene im Vergleich zu den hohen z-index zu veranschaulichen.
In dieser Demo können Sie ein SweetAlert-Pop-up und auch eine oberste Ebene (<dialog>) öffnen. Öffnen Sie <dialog> und versuchen Sie dann, das SweetAlert-Pop-up zu öffnen. Sie sehen, dass es sich unter dem Element der obersten Ebene befindet. Und die Wurzel unseres SweetAlert-Pop-ups verwendet eine z-index von 10.000 mit position: fixed.
.swal-overlay {
z-index: 10000;
position: fixed;
}
Sie müssen der <dialog> keine Stile zuweisen, damit sie über allen anderen Inhalten angezeigt wird.
Entwicklertools
Und damit kommen wir zum Support für DevTools. In den Chrome-Entwicklertools werden Elemente der obersten Ebene unterstützt, damit Sie diese überprüfen können. So lässt sich leichter nachvollziehen, wie sich die Dinge in der obersten Schicht stapeln oder was sich überhaupt in der obersten Schicht befindet.
Alina Varkki hat einen tollen Artikel geschrieben, in dem sie die Verwendung dieser Tools ausführlich erläutert. Sie sind derzeit als Vorabversion in Chrome Canary Version 105 verfügbar.
Geschafft!
Eine kurze Einführung in die oberste Schicht. Sie können beispielsweise Folgendes sagen:
.popup-container {
z-index: 10000;
}
Was würden Sie in die oberste Ebene einfügen? Haben Sie dialog schon ausprobiert? Oder haben Sie sich die OpenUI Popover API angesehen? Schreiben Sie uns!