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）とは デベロッパーツールで最

[coliss]

最上位レイヤー要素はz-indexが最も高い要素の上に表示され、かならず最上位に表示されます。

[n314]

最上位レイヤーの更に上に別の要素を表示したくなることがたまによくあるからz-indexを使ってるんじゃなかったのか。

[guru_guru]

【最新版】z-index_new_上書き禁止_latest(2).css

[spark7]

dialogやpopupはtop layerとやらに置かれますよって話なのかな。それでいてcssのスコープとかは元のDOMの位置のままで便利と。

[leiqunni]

「Documentの外」とは気合い入ってるけど、最上位レイヤーの奪い合いには変わらないのだ。同率最上位のエレメントは消えて、2位が繰り上げだな。

[gridchang]

“ントの残りの部”

[shingo-sasaki-0529]

ただ表示優先度が最大のスタックコンテキストが追加されただけで、結局最上位レイヤー内での最前争いが始まりそうではある。

[gnety]

z-indexではどうしても最上位に持ってこられない場合があるから、これはかなり有用になりそう

[chiba1008]

9999でいいよな。1byte減るし。

[arapro]

最上位配置はz-indexだけじゃなく「要素の外出し」が要るので、これが全モダンブラウザで使えたら助かる。（Magnificとかはやってくれたけど、シンプルめのライブラリだと自前実装が要るので面倒）

[toaruR]

!important; // over the top

[w_bonbon]

重複した時後発が更に上に来る、DOMの順序に限らず、これはありがたい。Safari = iOSが15.4〜で気持ち高いのが解消出来るか…。

[nmcli]

広告系に悪用されたくないものです