https://coliss.com/articles/build-websites/operation/css/what-is-the-top-layer.html

ポップアップやダイアログやフルスクリーンモードを実装する時などによく使用される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）とは

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

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

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

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

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