Stacking Contexts와 z-index의 이해

본 리드미는 MDN 문서를 보고 쌓임맥락에대해서 구체적으로 정리한 내용입니다

❶ 개요

z-index 는 많은 사람들이 알고 있지만 많은 사람들이 정확하게 모르는 속성중 하나예요.
제일 좋은 방법은 mdn 문서를 읽어보는 것이지만 모두 영어로 되어있어서 어려움이 있어요~
이제 z-index 와 Stacking Contexts 라는 것에 대해 저와 함께 알아봐요.

게다가 z-index는 실제로 정확하게 알고 있는 사람들이 적다고 생각해요.
( 실제로도 적긴하다는건 안비밀 😵‍💫 )

---

❷ 퀴즈

다음 쌓임맥락 관련 문제를 풀어볼까요?

<div>
  <span class="red">Red</span>
</div>
<div>
  <span class="green">Green</span>
</div>
<div>
  <span class="blue">Blue</span>
</div>
.red, .green, .blue {
  position: absolute;
}
.red {
  background: red;
  z-index: 1;
}
.green {
  background: green;
}
.blue {
  background: blue;
}

[문제 1]

링크 : 예시보기

빨간 <span>을 아래 규칙을 깨지 않으면서 파랑과 초록 <span> 요소 밑으로 가게 해주세요.

• HTML 마크업을 어떤 식으로든 건드려선 안돼요.
• 어떤 요소에도 z-index를 추가하거나 변경해선 안돼요.
• 어떤 요소의 position 속성도 추가하거나 변경해선 안돼요. ( 해답은 스크롤을 내려보면 볼 수 있어요. )
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

[정답]

빨간<span>의 부모인 <div>에 opacity를 1보다 작게 주는 것이에요.

링크 : 예시보기

div:first-child {
    opacity: .99;
}

---

❸ 쌓임 맥락(Stacking Contexts)

먼저 쌓임 맥락을 설명하는게 순서에 안맞는거 같긴 하지만 먼저 설명해야 아래 내용도 이해가 쉬워요.

쌓임 맥락이란 같은 부모 밑에 있어서 쌓임 순서에 따라 함께 앞 뒤로 한꺼번에 움직일 수 있는 요소들의 그룹이에요.
쌓임 맥락은 다음 셋 중 하나에 속할 때 만들어져요. (3+1)

• 문서의 뿌리 요소인 요소
• 요소의 position 값이 static이 아니면서 z-index도 auto가 아닐 때 (z-index:auto는 디폴트 값으로 z-index를 사용 안한것과 같아요.)
• opacity 값이 1보다 작을 때
• [ 모바일 웹킷과 크롬 22 이상에서, position:fixed는 z-index가 auto 여도 무조건 새로운 쌓임 맥락을 만들어요. ]
  
  

다음 예제 파일에서 Division Element #3 를 보면 모든 자식 요소들은 부모의 쌓임 맥락 안에서만 유효하다는 것을 알 수 있어요.
같은 선상에 있는 DIV 1, DIV 2, DIV 3 들의 쌓임 순서가 z-index값에 의해서 5, 2, 4 이지만 DIV 4는 z-index가 6인데도 불구하고
z-index 값이 5인 DIV 1 밑에 렌더링 돼요.
이것으로 DIV 3의 자식요소들은 쌓임 순서가 부모의 쌓임 맥락안에 있다는 것을 알 수 있어요.

링크 : 예시보기

• 뿌리 엘리먼트
  • DIV #1
  • DIV #2
  • DIV #3
    • DIV #4
    • DIV #5
    • DIV #6

❹ 쌓임 순서(Stacking Order)

z-index는 간단해보인다. 값이 높은것이 값이 낮은거 위에 렌더링 돼요.
하지만 실제로는 이게 다가 아니고 생각만큼 단순하지 않아요.

HTML 문서의 모든 요소는 다른 요소의 앞이나 뒤로 들어갈 수 있는데 이걸 쌓임 순서(stacking order)라고 해요.
이 순서를 정하는 규칙은 스펙에 상당히 명확하게 정의돼 있어요.
하지만 많은 개발자들이 이것들을 완전히 이해하고 있지 못해요.

• z-index와 position 속성이 없을 때는 기본적으로 HTML에 작성된 순서와 같아요.

  (실제론 조금 복잡해요. https://www.w3.org/TR/CSS2/zindex.html )

• 아래 그림과 같이 position 속성을 요소에 사용할 때, static이 아닌 position속성이 있는 모든 것들은
  position 속성이 없는 일반적인 요소들 앞에 렌더링돼요. (사용자 눈과 더 가까운)
  위에 쌓임 맥락에서 설명한것처럼 opacity 값이 1보다 작은 요소도 이와 같은 레벨의 쌓임 순서를 가지게 돼요.
  그리고 이것들은 html 작성 순서에 따라 쌓임 순서가 정해져요.
  

링크 : 예시보기

링크 : 예시보기

• z-index가 연관되면 좀 더 복잡해져요.

• 당연히 알고 있겠지만 position 속성을 쓰지 않으면 z-index 값은 작동하지 않아요.

  • 여기서 static이 아닌 position 속성이 부여되었을 때의 z-index값은 쌓임 맥락(stacking contexts)를 만들어내요.
  • 쌓임 맥락에 대한 설명을 상기시켜보면, 자식요소에 z-index 값을 아무리 낮추거나 높여도 부모중에
    (ex. position:relative;z-index:-10 을 가진 부모) 쌓임 맥락이 있다면 그 쌓임 맥락 밑이나 그 위로 뚫고 나갈 수가 없어요.
    
  • 반대로 말하면 부모중에 쌓임 맥락이 없는 곳까지 z-index 값에 따라 한도 끝도 없이 밑 또는 위로 뚫고 나갈 수 있어요.
  • 다시 말하자면 좀 황당한 예이긴 하지만 자식요소에 z-index:-999999 를 해도 부모중에 쌓임 맥락인 부모 밑으로 내려갈 수 없어요.
    
    

• 형제 요소들간의[같은 단계의] 상황에서 쌓임 순서

  • 뿌리요소인 html 요소
  • position 값이 있고 z-index 값이 음수인 요소와 그 자식요소들 ( z-index 값이 같으면 HTML 작성 순서에 따라 렌더링 )
  • position 값이 없는 요소 ( HTML 작성 순서에 따라 렌더링 )
  • position 값이 없고 opacity 값이 1보다 작은 요소
  • 그리고 position 값이 있고 z-index 값이 없거나 auto 인 요소와 그 자식요소들( 예제 파일 index2 참고 ), ( HTML 작성 순서에 따라 렌더링 )
  • position 값이 있고 z-index 값이 양수인 요소와 그 자식요소들 ( z-index 값이 같으면 HTML 작성 순서에 따라 렌더링 )