最上位レイヤはブラウザのビューポートで、関連する document の上に位置し、各 document に 1 つの最上位レイヤが関連付けられています。つまり、最上位レイヤにプロモートされる要素は、z-index や DOM 階層を気にする必要がありません。また、::backdrop 疑似要素を使って操作することもできます。Fullscreen は、dialog のサポートが登場する前の最上位レイヤの好例だったため、Fullscreen API の仕様がさらに詳しく説明されています。
最上位レイヤは、document の残りの部分より上にコンテンツをレンダリングする問題の解決に役立ちます。
注意すべき重要な点:
- 最上位レイヤは document フローの外部にあります。
- z-index は最上位レイヤに影響しません。- 最上位レイヤの各要素には、スタイルを設定可能な ::backdrop 疑似要素があります。
- 各要素と ::backdrop は、新しいスタッキング コンテキストを生成します。
- 最上位レイヤの要素は、セットでの表示順にスタックされます。最後の要素が上に表示されます。要素をプロモートする場合は、その要素を削除してからもう一度追加します。
これまでどのように最上位のレイヤを模倣してきたかデベロッパーが body の最後で空のコンテナ要素をドロップするのは珍しいことではありません。そして、これは最上位のレイヤの「偽装」として使用されます。このコンテナは、スタック内の他のすべてのコンテナよりも上に配置されます。何よりも優先したいものがある場合は、そのコンテナに追加します。これは、SweetAlert、reactjs-popup、Magnific Popup などの一般的なパッケージで確認できます。
<dialog> や Popover などの新しい組み込みコンポーネントや API を使用すると、これらの回避策に頼る必要はありません。コンテンツを最上位のレイヤにプロモートできます。
UI フレームワークを使用すると、プロモートされた要素を対応するコンポーネントと同じ場所に配置できます。ただし、レンダリングに関しては DOM 内で分離されることがよくあります。
最上位レイヤを使用することで、プロモートされた要素はソースコード内のどこにそれらを配置するか（<dialog> など）になります。要素が DOM の下方にいくつあっても問題ありません。最上レイヤにプロモートされ、コンポーネントの HTML と同じ場所に配置され、想定している場所で検査できます。これにより、DOM 内のトリガー要素とプロモートされる要素の両方を同時に簡単に検査できます。トリガー要素で属性を更新する場合などに特に便利です。また、要素が同じ場所に配置されるため、アクセシビリティにもメリットがあります。
最上位レイヤと高い z-index を比較するため、次のデモをご覧ください。
このデモでは、SweetAlert ポップアップを開き、最上位レイヤの <dialog> を開くこともできます。<dialog> を開いてから、SweetAlert ポップアップを開いてみましょう。最上位のレイヤ要素の下に表示されます。SweetAlert ポップアップのルートは、position: fixed で 10000 の z-index を使用しています。
.swal-overlay {
z-index: 10000;
position: fixed;
}
<dialog> を他のすべてのコンテンツの上に表示するために、スタイルを適用する必要はありません。
DevTools
次は DevTools のサポートについてです。Chrome DevTools で最上位レイヤ要素のサポートが追加され、最上位レイヤを検査できるようになりました。これにより、最上位レイヤにあるものや、最上位レイヤにあるものについて、デバッグや可視化が容易になります。
Alina Varkki 氏は、これらのツールの使い方を詳しく説明した素晴らしい記事を投稿しています。この機能は現在、Chrome Canary バージョン 105 でプレビュー機能としてご利用いただけます。
以上です。
最上位レイヤについて簡単に説明します。次のようなユーザーに「バイバイ！」と言えるようにする。
.popup-container {
z-index: 10000;
}
最上位レイヤに何をプッシュしますか？dialog はお試しになりましたか？OpenUI Popover API については、Google までお知らせください。