Die oberste Ebene befindet sich über dem zugehörigen document im Darstellungsbereich des Browsers. Jedem document ist eine oberste Ebene zugeordnet. 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 Fullscreen API-Spezifikation wird ausführlicher beschrieben, da Fullscreen ein gutes Beispiel für die oberste Ebene war, die vor Einführung des dialog-Supports verwendet wurde.
Mit der obersten Ebene lässt sich das Problem des Renderns von Inhalten über dem Rest von document lösen.
Wichtige Hinweise:
– Die oberste Ebene befindet sich außerhalb des document-Ablaufs.
– z-index hat keine Auswirkungen auf den obersten Layer.
– Jedes Element in der obersten Ebene hat ein anpassbares ::backdrop-Pseudoelement.
– Jedes Element und ::backdrop generieren einen neuen Stapelkontext.
- 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 hochstufen möchten, entfernen Sie es und fügen Sie es wieder hinzu.
Wie haben wir die oberste Ebene bisher nachgeahmt? Nun, es ist nicht ungewöhnlich, dass Entwickler ein leeres Containerelement am Ende des body weglassen. Dies wird dann als „Nachahmung“ im obersten Layer. Die Idee dahinter ist, dass dieser Container über allem anderen im Stack positioniert wird. Wenn Sie etwas über alles andere hochstufen möchten, hängen Sie es an diesen Container an. Das sehen wir in beliebten Paketen wie SweetAlert, reactjs-popup oder Magnific Pop-up.
Bei neuen integrierten Komponenten und APIs wie <dialog> und „Popover“ müssen Sie nicht auf diese Behelfslösungen zurückgreifen. Sie können Inhalte auf der obersten Ebene platzieren.
Mithilfe von UI-Frameworks können wir gesponserte Elemente gemeinsam mit ihren Komponenten an einem Ort platzieren. Beim Rendern werden sie jedoch im DOM häufig getrennt.
Wenn du die oberste Ebene verwendest, werden sie dort im Quellcode platziert, wo du sie einfügst (z. B. ein <dialog>). Es spielt keine Rolle, wie viele Ebenen im DOM das Element umfasst. Es wird in den obersten Layer hochgestuft und Sie können es dort überprüfen, wo es sich Ihrer Meinung nach befindet, zusammen mit dem HTML-Code Ihrer Komponente. Dadurch ist es einfacher, sowohl das Trigger-Element als auch das hochgestufte Element im DOM gleichzeitig zu prüfen. Dies ist beispielsweise nützlich, wenn das Triggerelement Attributaktualisierungen vornimmt. 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 unter dem obersten Layer-Element angezeigt wird. Die Wurzel unseres SweetAlert-Popups ist ein z-index von 10.000 mit position: fixed.
.swal-overlay {
z-index: 10000;
position: fixed;
}
Sie müssen keine Stile auf <dialog> anwenden, damit es über allen anderen Inhalten erscheint.
Entwicklertools
Damit kommen wir zum Support der Entwicklertools. In den Chrome-Entwicklertools werden Elemente der obersten Ebene unterstützt, damit Sie diese überprüfen können. Dies erleichtert das Debuggen und Visualisieren, wie sich die Elemente im obersten Layer oder sogar auf dem obersten Layer befinden.
Alina Varkki hat einen tollen Artikel veröffentlicht, in dem die Verwendung dieser Tools ausführlich erläutert wird. Sie sind derzeit als Vorabversion in Chrome Canary-Version 105 verfügbar.
Geschafft!
Eine kurze Einführung in die oberste Ebene. Mit der Funktion „Auf Wiedersehen!“ zu Dingen wie:
.popup-container {
z-index: 10000;
}
Was würden Sie in die oberste Schicht verschieben? Haben Sie dialog ausprobiert? Oder haben Sie sich die OpenUI Popover API angesehen? Schreiben Sie uns!