[CSS] z-index와 쌓임 맥락(Stacking Context)

z-index 에 대해 검색하다가 좋은 글을 보게되었다.

[번역] z-index에 관해 아무도 말해 주지 않은 것이라는 글이고,

원문 What no one told you about z-index 을 번역한 글이다.

글을 읽으며 든 생각은 z-index가 적용되는 방식은 생각보다 복잡하며, 스펙에는 그러한 정보가 모두 들어있다는 점이다.

쌓임 순서 (Stacking Order)란? z-index가 높으면 위로 오고, z-index가 낮으면 아래로 가는 것이다.

쌓임 맥락 (Stacking Context)란? 같은 부모 밑에 쌓임 순서에 따라 앞뒤로 한꺼번에 움직일 수 있는 요소를 말한다.

쌓임 맥락이 만들어지는 조건은

- html 요소 (그 자체)

- 요소가 position: static이 아니고, z-index: auto 가 아닐 때

- 요소의 opacity 값이 1보다 작을 때

그리고, 모바일 웹 킷과 크롬 22 (찾아보니 매우 오래된 버전이잖아..)이상에서, position: fixed 는 무조건 쌓임 맥락을 만든다. 

특정 쌓임 맥락에서의 쌓임 순서

1. 쌓임 맥락의 뿌리 요소 (즉, html 요소)

2. position 값이 있고, z-index 가 음수인 요소

3. position 값이 없는 요소

4. position 값이 있고, z-index 가 auto인 요소

5. position 값이 있고, z-index 가 양수인 요소

여기서, 알아야 할 것은 

2와 같이 position 값이 있고, zindex 값이 음수인 경우 부모보다 아래로 갈 수 있다는 것이다.

원문에서 작성된 예시를 조금 수정해보았다.

See the Pen Stacking Order (problem) by dolhim (@dolhim) on CodePen.

위의 예제를 보면, 두가지를 확인할 수 있다.

첫째는, opacity를 줄 경우 새로운 쌓임 맥락이 생긴다는 것이다.

z-index 값에 따라 빨간색 요소가 제일 위로 올라와야 하는데, 아래에 가 있다.

빨간색 요소의 부모에 opacity 값을 주어 해당 div1이 별도의 쌓임 맥락을 구성한 것이다.

둘째는, position에 static 외의 값을 주고, z-index에 음수 값을 주면 부모보다 아래로 갈 수 있다는 것이다.

div4는 검은색 요소를 자식으로 가지고 있는데, 검은색 요소가 position 값과 z-index 음수 값을 가져서 부모보다 뒤로 간 것을 확인할 수 있다.