[css] z-index가 의도대로 되지않는 것 같다? (with sticky)

sticky에서는 stacking context가 새로 생겨난다!

문제상황

아래 이미지를 설명하자면
header(position: sticky)가 Modal(createPortal로 id='portal'내에 생성함)위로 올라와버린 상황입니다.

모달은 분명 최상위 context이어야 하는데 의도치않게 역전이 된 상황입니다.

z-index의 우선순위 문제인가?

분명 구조는 아래와 같습니다. (대략적으로)
portal에 z-index를 10000이나 줬는데도 Header영역은 여전히 Modal위를 올라오고 있는 상황입니다.
분명 2가지 div(portal과 next)는 같은 레벨에 있고, portal이 z-index에 의해 우선순위를 갖습니다.
따라서 Modal(portal)이 무조건 위로 올라와야하는 것이죠.

div.__next
	header { position: sticky }

div.portal
	div.Modal_overlay

sticky는 new stacking context를 만든다.

Header가 Modal위로 올라오게된 사연은 sticky라는 position의 특징때문입니다.
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를 생성한다고 합니다. 그리고 그것은 스크롤이 가능한 ancestor에게 붙는다고 되어있죠, Modal은 조상은 아니지만 현재 스크롤이 가능한 상황입니다. 따라서 Modal과 동일한 stacking context level을 갖게 된 상황이라고 할 수 있습니다.

결론

결론은 Modal의 z-index: 999로 주고, sticky element에도 z-index: 10 (혹은 덜주던가)으로 두개의 z-index를 조정할 수 밖에 없습니다.