겹침과 z-index

겹쳤을 때 무엇이 위에 오는가

3.6 에서 요소를 겹쳐 놓았습니다. 둘 이상이 같은 자리에 오면 어느 것이 위에 그려질지 정해야 합니다.

아무것도 적지 않으면 나중에 적은 것이 위입니다. 그것으로 모자랄 때 z-index 를 사용합니다.

차례 바꾸기

<div class="stage">
  <div class="box a">먼저 적음</div>
  <div class="box b">나중에 적음</div>
</div>

.stage { position: relative; height: 160px; }

.box {
  position: absolute;
  width: 140px; height: 90px;
  padding: 10px; border-radius: 8px;
}

.a { top: 10px;  left: 10px;  background: #d9cff7; }
.b { top: 40px;  left: 60px;  background: #f2c879; }

/* 값이 큰 쪽이 위입니다. z-index 를 서로 바꿔 보십시오. */
.a { z-index: 1; }
.b { z-index: 2; }

z-index 는 position 이 static 이 아닌 요소에만 듣습니다. 그냥 놓인 요소에 적으면 아무 일도 일어나지 않습니다. (Flexbox·Grid 항목은 예외로 듣습니다.)

쌓임 맥락 — z-index 가 듣지 않는 까닭

값을 아무리 키워도 위로 올라오지 않는 일이 있습니다. 비교가 같은 무리 안에서만 이루어지기 때문입니다. 그 무리를 쌓임 맥락이라고 합니다.

<div class="stage">
  <div class="group">
    <div class="box inner">z-index 999</div>
  </div>
  <div class="box outer">z-index 2</div>
</div>

.stage { position: relative; height: 200px; }

/* 이 요소가 무리를 하나 만듭니다. 안쪽의 999 는 이 무리 안에서만 셉니다. */
.group { position: relative; z-index: 1; }

.box { position: absolute; width: 150px; padding: 12px; border-radius: 8px; }

.inner { z-index: 999; top: 20px; left: 20px; background: #d9cff7; }
.outer { z-index: 2;   top: 60px; left: 70px; background: #f2c879; }

999 가 2 에게 가려집니다. 안쪽 상자는 .group 이라는 무리에 속해 있고, 그 무리 전체의 값이 1 이기 때문입니다. 무리 안에서 아무리 높아도 무리끼리의 순서를 넘지 못합니다.

해결은 값을 키우는 것이 아니라 .group 의 값을 올리거나 그 z-index 를 없애는 것입니다.

무리를 만드는 것들

다음 가운데 하나만 있어도 그 요소는 새 무리를 만듭니다. 본인이 만든 줄 모르고 쓰는 것들이 있어 원인을 찾기 어렵습니다.

• position 이 static 이 아니고 z-index 가 auto 가 아닌 요소
• position: fixed 와 sticky
• opacity 가 1 보다 작은 요소
• transform·filter 가 있는 요소(4.5)

opacity: 0.99 하나로 그 안의 모든 겹침 순서가 달라질 수 있습니다.

세 가지

• z-index 를 계속 키웁니다. 9999 로도 안 되면 값이 문제가 아니라 무리가 문제입니다. 조상 가운데 무리를 만든 것이 없는지 보십시오.
• position 없이 z-index 만 적습니다. 듣지 않습니다. relative 만 더해도 됩니다.
• 값을 제멋대로 씁니다. 10 · 500 · 9999 가 섞이면 나중에 아무도 순서를 알 수 없습니다. 1 · 10 · 100 처럼 단계를 정해 두고 그 안에서 사용하십시오.

직접 해보기

정리

• 아무것도 적지 않으면 나중에 적은 것이 위입니다.
• z-index 는 position 이 있어야 듣습니다.
• 비교는 같은 무리 안에서만 이루어집니다. 무리끼리의 순서를 넘지 못합니다.
• opacity·transform 도 무리를 만듭니다.