最上位のレイヤは、ブラウザのビューポートで関連する document の上になり、各 document には 1 つの最上位レイヤが関連付けられます。つまり、最上位レイヤにプロモートされる要素は、z-index や DOM 階層を考慮する必要がないことを意味します。また、使いやすい ::backdrop 疑似要素も用意されています。dialog のサポートが導入される前は Fullscreen が使用されていた最上位レイヤの好例であるため、Fullscreen API の仕様ではさらに詳しく説明します。
最上位レイヤは、document の他の部分の上にコンテンツをレンダリングする際の問題を解決します。
重要事項:
- 最上位レイヤが document フローの外部にある。
- z-index は最上位レイヤでは機能しません。
- 最上位レイヤの各要素には、スタイル設定可能な ::backdrop 疑似要素があります。
- 各要素と ::backdrop が新しいスタッキング コンテキストを生成します。
- 最上位レイヤの要素は、セットに表示される順に積み重ねられます。最後のものが一番上に表示されます。要素をプロモートする場合は、その要素を削除してから再度追加します。
これまで最上位レイヤをどのように模倣してきたか？デベロッパーが body の最後に空のコンテナ要素をドロップすることは珍しくありません。そして これは“偽物”として使用されます最上位レイヤです。このコンテナは、スタック内の他のものよりも上に配置されます。プロモートする対象を他より優先する場合は、対象のコンテナに追加します。これは、SweetAlert、reactjs-popup、Magnific Popup などの一般的なパッケージで確認できます。
<dialog> や「ポップオーバー」などの新しい組み込みコンポーネントと API を使用すると、これらの回避策に頼る必要はありません。最上位レイヤにコンテンツをプロモートできます。
UI フレームワークを使用すると、プロモートされる要素を同等のコンポーネントと同じ場所に配置できます。しかし、レンダリングの際には DOM 内では分離されていることがよくあります。
最上位のレイヤを使用すると、プロモートされた要素はソースコード内の場所に配置されます（例: <dialog>）。要素が DOM の何層下にあるかは関係ありません。レイヤが一番上のレイヤにプロモートされて、コンポーネントの HTML と同じ場所に配置されます。これにより、DOM 内のトリガー要素とプロモートされる要素の両方を同時に確認しやすくなります。特に、トリガー要素で属性の更新を行う場合などに便利です。また、要素が同じ場所に配置されるため、アクセシビリティのさらなる利点もあります。
最上位レイヤと高い z-index を比較するため、このデモで考えてみましょう。
このデモでは、SweetAlert ポップアップと最上位レイヤ <dialog> を開くことができます。<dialog> を開き、SweetAlert ポップアップを開いてみます。最上位レイヤ要素の下に表示されます。また、SweetAlert ポップアップのルートでは、position: fixed で z-index を 10000 としています。
.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 をお試しください。ご確認ください。