z-index

z-index 의 쌓임 맥락을 먼저 읽은 것이 다른 글을 이해하는데 도움이 된다

auto 는 0 이 아니다

쌓임 맥락 : The stacking context

문서의 루트 요소. (<html>)
position이 absolute 또는 relative이고, z-index가 auto가 아닌 요소.
position이 fixed 또는 sticky인 요소. (sticky는 모든 모바일 브라우저에서는 해당하지만 구형 데스크톱 브라우저에서는 해당하지 않음)
플렉스(flexbox (en-US)) 컨테이너의 자식 중 z-index가 auto가 아닌 요소.
그리드(grid) 컨테이너의 자식 중 z-index가 auto가 아닌 요소.
opacity가 1보다 작은 요소. (불투명도 명세 참고)
mix-blend-mode가 normal이 아닌 요소.
다음 속성 중 하나라도 none이 아닌 값을 가진 요소.
isolation 이 isolate인 요소.
-webkit-overflow-scrolling이 touch인 요소.
will-change의 값으로, 초깃값이 아닐 때 새로운 쌓임 맥락을 생성하는 속성을 지정한 요소.
contain이 layout, paint, 또는 둘 중 하나를 포함하는 값(strict, content 등)인 요소.

하나의 쌓임 맥락은 부모 쌓임 맥락 안에서 통째로 하나의 단위로 간주됩니다.
DIV #4는 DIV #1보다 z-index 속성 값이 더 크지만 DIV #1보다 아래에 렌더링 되었다. 왜냐하면 DIV #1의 z-index 속성 값인 5는 뿌리 엘리먼트의 쌓임 맥락 안에서 유효하나 DIV #4의 z-index 속성 값인 6은 DIV #3의 쌓임 맥락 안에서만 유효하기 때문이다. DIV #4는 자신이 속하는 DIV #3의 z-index 속성 값이 4이므로 DIV #1 아래에 쌓였다.