[css]z-indexは予想に達していないようですか?(with sticky)

stickyにスタックコンテキストが新しく現れました!

問題の状況

次の画像の説明:
ヘッダー(position: sticky)はモードに上昇しました(ポートid=「portal」内で作成されます).
モードはトップコンテキストでなければなりませんが、意外に逆転しました.

z-indexの優先度の問題ですか?

明らかに、その構造は以下の通りである.(概ね)
portal 10000個のz−indexを与えたが,Header領域は依然としてモード上であった.
明らかに、2つのdiv(portalとnext)は同じレベルであり、portalはz-indexによって優先される.
だからモード(portal)は必ず上へ

div.__next
	header { position: sticky }

div.portal
	div.Modal_overlay

stickyは新しいスタックコンテキストを作成します。

Headerがモデルに上がったのはstickyというポジションの特徴です
MDNと読むとこんな感じ
sticky
The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.
This value always creates a new stacking context. Note that a sticky element "sticks"to its nearest ancestor that has a "scrolling mechanism"(created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor. This effectively inhibits any "sticky"behavior (see the GitHub issue on W3C CSSWG).
要約すると、stickyは独自のstacking contextを作成する.さらにスクロール可能な祖先に依存していると言われていますが、Modelは祖先ではありませんが、現在はスクロール可能な状況です.これは、スタックコンテキストレベルがモードと同じであることを意味します.

n/a.結論

結論として、2つのz-index:999をmodalのz-index:999に変換するしかなく、sticky要素については、z-index:10(またはそれ以下)をz-indexに変換することもできる.