쌓임맥락(Stacking Contexts),쌓임순서(Stacking Order)

쌓임 맥락(Stacking Contexts)

같은 부모 밑에 있어서 쌓임 순서에 따라 함께 앞뒤로 한꺼번에 움직일 수 있는 요소들의 그룹은 쌓임 맥락(stacking context)으로 알려진 것을 만든다. 쌓임 맥락을 완전히 이해하는 것이 z-index와 쌓임 순서가 작동하는 방법을 진정으로 이해할 수 있는 열쇠다.

모든 쌓임 맥락에는 그것의 뿌리(root) 요소인 HTML 요소가 있다. 어떤 요소에서 쌓임 맥락이 새롭게 만들어질 때, 그 쌓임 맥락은 자식 요소들이 쌓임 순서에서 특정 범위를 벗어나지 못하도록 한계를 정하게 된다. 1 이것은, 맨 뒤의 쌓임 맥락에 있는 요소는 그보다 앞의 쌓임 맥락에 있는 요소보다 앞에 나올 수 없다는 것을 의미한다. z-index를 십만을 줘도 소용 없다. 2

쌓임 맥락은 다음 셋 중 하나에 속할 때 만들어진다.

• 요소가 문서의 뿌리 요소일 때 (즉, 요소)
• 요소의 position 값이 static이 아니면서 z-index도 auto가 아닐 때
• 요소의 opacity 값이 1보다 작을 때
  [모바일 웹킷과 크롬 22 이상에서, position: fixed는 무조건 새로운 쌓임 맥락을 만든다. z-index가 “auto”여도 말이다.]

  같은 [단계의] 쌓임 맥락에서 쌓임 순서

  한 쌓임 맥락에서 쌓임 순서를 정하는 기본적 규칙은 아래와 같다([아래 순서대로] 뒤에서 앞으로 [쌓인다]).

1. 쌓임 맥락의 뿌리(root) 요소.

2. position 값이 있고 z-index 값이 음수인 요소(와 자식들). (z-index 값이 높은 요소가 앞에 놓인다. 값이 같으면 HTML에 나타난 순서에 따라 나타난다.)

3. position 값이 없는 요소(HTML에서 나타나는 순서를 따른다).

4. position 값이 있고 z-index 값이 auto인 요소(와 그 자식들). (HTML에서 나타나는 순서에 따라)

5. position 값이 있고 z-index 값이 양수인 요소(와 그 자식들). (z-index 값이 높은 요소가 앞에 놓인다. 값이 같으면 HTML에 나타난 순서에 따라 나타난다.)

   참고

   z-index가 음수면서 position 속성이 있는 요소는 쌓임 맥락에서 맨 먼저 쌓인다. 즉, 모든 다른 요소들보다 뒤에 있게 된다. 때문에 흔치 않은 일이 벌어지는데, 같은 쌓임 맥락 안에 있는 자기 부모보다 뒤에 놓일 수 있게 된다. 이것은 해당 요소의 부모가 같은 쌓임 맥락 안에 있는 경우에만 작동한다. [물론 그 요소도] 쌓임 맥락의 뿌리 요소보다 뒤로 갈 수는 없다.

   예제1

   html

    <div>
    <span class="red">Red</span>
   </div>
   <div>
    <span class="green">Green</span>
   </div>
   <div>
    <span class="blue">Blue</span>
   </div>
   

   css

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

   .red, .green, .blue {
   position: absolute;
   width: 100px;
   color: white;
   line-height: 100px;
   text-align: center;
   }

   .red {
   z-index: 1;
   top: 20px;
   left: 20px;
   background: red;
   }

   .green {
   top: 60px;
   left: 60px;
   background: green;
   }

   .blue {
   top: 100px;
   left: 100px;
   background: blue;
   }

   <div><!-- 1 -->
   <span><!-- 6 --></span>
   </div>
   <div><!-- 2 -->
   <span><!-- 4 --><span>
   </div>
   <div><!-- 3 -->
   <span><!-- 5 --></span>
   </div>

   

   첫번쨰 div에 opacity:0.99값을 주기 전에는 위와 같은 순서로 위와 같은 그림으로 렌더링된다.

   <div><!-- 1 -->
    <span><!-- 1.1 --></span>
   </div>
   <div><!-- 2 -->
    <span><!-- 4 --><span>
   </div>
   <div><!-- 3 -->
    <span><!-- 5 --></span>
   </div>   

첫번째 div에 opacity:0.99값을 주면 아래와 같이 순서가 바뀐다.

예제2

<div id="div1"> 
</div>
   
<div id="div2">
</div>

<div id="div3">
 <div id="div4">
 </div>
 
 <div id="div5">
 </div>
  
 <div id="div6">
 </div>
</div>

• 뿌리 엘리먼트
• DIV #2 z-index가 2
• DIV #3 z-index가 4
  • DIV #5 z-index가 1인데 z-index가 4인 엘리먼트 아래에서 쌓였으므로 렌더링 순서는 4.1이다.
  • DIV #6 z-index가 3인데 z-index가 4인 엘리먼트 아래에서 쌓였으므로 렌더링 순서는 4.3이다.
  • DIV #4 z-index가 6인데 z-index가 4인 엘리먼트 아래에서 쌓였으므로 렌더링 순서는 4.6이다.
• DIV #6 z-index가 5