z-index 가 안 먹힌다? 쌓임 맥락 (stacking context)

가끔 z-index가 9999를 줘도 안 통할 때가 있는데, 이는 z-index의 쌓임 맥락 특성 때문이다.

 

z-index의 비교는 같은 쌓임 맥락 안에서만 비교된다.

 

쌓임 맥락이 생성되는 조건은 대표적으로 position이 설정되어 있을 때이고, 더 많은 조건들이 있는데 아래 사이트에서 참고할 수 있다.

 

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_positioned_layout/Stacking_context

 

 

 

1. 형제 태그들 끼리의 비교

 

  <div class="box red">z-index 10</div>
  <div class="box blue">
    z-index 1
  </div>
</body>

red 박스와 blue 박스는 형제들끼리의 같은 쌓임 맥락을 형성한다. 따라서 z-index값을 비교해서 누가 위에 렌더링 되는지 정할 수 있다.

 

2. 여기서 blue box의 자손이 생기면 ?

  <div class="box red">z-index 10</div>
  <div class="box blue">
    z-index 1
    <div class="box green">z-index 100</div>
  </div>

현재 z-index의 우선순위는 green이 가장 크고, red가 2번째, blue가 가장 작다.

 

따라서 렌더링을 해보면 green이 가장 위에 있고, red가 그다음, blue가 가장 밑에 있어야 한다.

 

하지만 red와 blue는 같은 쌓임 맥락 안에서 비교하고, green은 blue와 같은 쌓임 맥락 이기 때문에 green과 red는 비교할 수 없다.

 

즉 여기서 green의 z-index가 9999가 되어도 red보다 위에 렌더링 될 수 없다.