CSSのz-index: 10000;はいらなくなる、要素を最上位に表示する「最上位レイヤー（top layer）」の基礎知識と使い方

ポップアップやダイアログやフルスクリーンモードを実装する時などによく使用されるCSSのz-index: 10000;が必要なくなります。

Chrome 105のデベロッパーツールで「最上位レイヤー（top layer）」がサポートされました。この最上位レイヤー要素は、z-indexが最も高い要素の上に表示され、かならずドキュメントの最上位に表示されます。

最上位に表示したいコンポーネントをHTMLの最下部や最上部に記述したり、CSSのz-index: 10000;で最上位に昇格させる必要はありません。

Meet the top layer: a solution to z-index:10000
by Jhey Tompkins

下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。

• CSSの最上位レイヤー（top layer）とは
• デベロッパーツールで最上位レイヤーを検証
• 終わりに

CSSの最上位レイヤー（top layer）とは

最上位レイヤー（top layer）は、ブラウザのビューポート内に関連するドキュメント上にあり、各ドキュメントは最上位レイヤーを1つ持ちます。これは最上位レイヤーに昇格された要素は、z-indexやDOMツリーを気にする必要がないことを意味します。また、最上位レイヤーでは::backdrop疑似要素を使用できます。Fullscreen APIの仕様では最上位に表示する素晴らしい例が解説されています。

【訳者注】::backdrop疑似要素および最上位レイヤーはすべての主要なブラウザ（IEも！）にサポートされています。
参考: ::backdropのサポート状況

最上位レイヤーは、ドキュメントの残りの部分よりも上にコンテンツを表示するという問題を解決するのに役立つ機能です。覚えておくべき重要なポイントがいくつかあります。

• 最上位レイヤーは、documentフローの外側にあります。
• z-indexは、最上位レイヤーでは効果がありません。
• 最上位レイヤーのすべての要素に、スタイルが可能な::backdrop疑似要素があります。
• 各要素と::backdrop疑似要素は、新しい積み重ねコンテキストを生成します。
• 最上位レイヤーの要素は、セット内に表示される順番に積み重ねられます。つまり、最後の要素が一番上に表示されます。ある要素を上に表示したい場合は、その要素を削除し、再度追加します。

デベロッパーツールで最上位レイヤーを確認すると、下記のように表示されます。top-layerのバッジとDOMツリー最下部の#top-layerに注目してください。

DOMツリーの最下部に#top-layerが表示される

最上位レイヤーがなかった時はどのように最上位に表示してきたのでしょうか。bodyの最後に空のコンテナ要素を擬似的な最上位レイヤーとして使用していました。アイデアは、このコンテナがスタック内の他のすべての上に配置されるというものです。何かを他のものよりも上に表示させたいときは、このコンテナを追加します。このテクニックは、SweetAlert, reactjs-popup, Magnific Popup などの人気があるパッケージで確認できます。

SweetAlertのデモページを作成してみました。

See the Pen
Sweetalert Demo by web.dev (@web-dot-dev)
on CodePen.

<dialog>やPop Up APIなどを使用すれば、これらの回避策に頼る必要はありません。コンテンツを最上位レイヤーに表示することができます。

UIフレームワークでは、最上位に昇格した要素を対応するコンポーネントと一緒に配置することができます。しかし、レンダリングの際にDOM内で分離されることがよくあります。

最上位レイヤーを使用することで、昇格した要素はソースコードに配置した場所になります（<dialog>など）。その要素がDOMの何層下にあるかは関係ありません。この要素は最上位レイヤーに昇格し、コンポーネントのHTMLと同じ位置にあるため、期待通りの場所で表示することができます。これにより、DOM内のトリガー要素と昇格された要素の両方を同時に表示することが容易になります。たとえば、トリガー要素が属性の更新をしている場合、特に便利です。また、要素は同じ場所に配置されているため、アクセシビリティの面でも利点があります。

上記のデモを<dialog>で実装したデモです。

See the Pen
Basic Dialog Example by web.dev (@web-dot-dev)
on CodePen.

最上位レイヤーと高いz-indexを比較するには、下記のデモをご覧ください。

See the Pen
Top Layer vs z-index: 10000 by web.dev (@web-dot-dev)
on CodePen.

このデモでは、SweetAlertのポップアップと最上位レイヤーの<dialog>を開くことができます。「Open Top Layer Dialog」の方を開いたあとに、「Open SweetAlert Dialog」を開いてみてください。

最上位レイヤー要素の下にSweetAlertが表示されることが分かると思います。SweetAlertはz-index: 10000;で、position: fixed;にしています。

最上位レイヤーを使用すると、<dialog>が他のコンテンツの上に表示されるように、スタイルを設定する必要はありません。

デベロッパーツールで最上位レイヤーを検証

そして、デベロッパーツールのサポートに進みます。
Chromeのデベロッパーツールでは、最上位レイヤー要素をサポートしているため、最上位レイヤーを検証できます。これにより、最上位レイヤーに何があるか視覚化でき、デバッグすることが容易になります。

デベロッパーツールで最上位レイヤーを検証

Alina Varkkiが、これらの使用について詳しく説明した素晴らしい記事を掲載しています。

【訳者注】
デベロッパーツールで最上位レイヤーを確認する手順を紹介します。
デモページを開いて、「Open Dialog 1」をクリックし、ダイアログを開いた状態で右クリックから「検証」を選択してデベロッパーツールを開きます。

これでtop-layerのバッジ、最下部に#top-layerが表示されます。

DOMツリーの最下部に#top-layerが表示される

もしバッジが表示されない場合は、flexなどの他のバッジを右クリックして「バッジの設定」を開きます。

「バッジの設定」を開く

上部にバッジの一覧が表示されるので、「top-layer」のチェックをオンにします。

「top-layer」のチェックをオンにする

終わりに

最上位レイヤーについて簡単に言うと、下記のCSSに「バイバイ！」と言えるようになります。

あなたは最上位レイヤーに何を表示しますか？
dialogで試してみてください、あるいはopenUI Pop-up APIをチェックしてみてください。