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

흥미로운 문제

<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;
}

See the Pen Stacking Order (problem) by Philip Walton (@philipwalton) on CodePen.

위 붉은색 영역을 파랑과 초록 영역 밑으로 가게 하세요.

단 조건이 있습니다.

HTML 마크업을 건드려선 안된다.
어떤 요소에도 z-index를 추가하거나 변경해선 안된다.
어떤 요소의 position 속성도 추가하거나 변경해선 안된다.

만약 성공하신다면 아마 쌓임 순서와 쌓임 맥락을 이해하고 있으신 것입니다.

해결 방법

첫번째 <div>(빨간 <span>의 부모)에 opacity를 1보다 작게 주는 방법입니다.

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

신기하지 않으신가요? 왜 opacity 를 추가했을 때 붉은색 영역이 아래에 위치하게 되었을까요?

쌓임 순서(Stacking Order)

쌓임 순서란 같은 맥락에 존재하는 요소들이 위 또는 아래에 위치하게되는 기준입니다. 1 이 가장 아래에 위치하게 되고, 4가 가장 위에 위치하게 됩니다.

position 값이 있고 z-index 값이 음수인 요소 (z-index 값이 높은 요소가 위에 높인다. 값이 같을 경우 HTML 마크업 순서에 따름)
position 값이 없는 요소 (값이 같을 경우 HTML 마크업 순서에 따름)
position 값이 있고 z-index 값이 auto 인 요소 (값이 같을 경우 HTML 마크업 순서에 따름)
position 값이 있고 z-index 값이 양수인 요소 (z-index 값이 높은 요소가 위에 높인다. 값이 같을 경우 HTML 마크업 순서에 따름)

쌓임 맥락(Stacking Context)

쌓임 맥락 이란 HTML 요소들의 그룹이라고 생각합니다. 이런 쌓임 맥락의 우선순위에 따라서 요소가 위에 위치하고 아래에 위치하는지가 정해집니다. 또한 같은 맥락(Context)에 존재하는 요소들의 배치는 쌓임 순서(Stacking Order)에 의해 정해집니다.

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

요소가 문서의 뿌리 요소일 때 (<html> 요소)
요소에 position 값이 static 이 아닐 때
요소의 opacity 값이 1보다 작을 때

위 문제의 해설

따라서 붉은색 영역은 원래 Position Context 에 있을 때는 z-index:1 로 가장 높은 쌓임 순서를 가지고 있었지만, opacity 속성이 부여되므로써 Opacity Context 라는 새로운 쌓임 맥락이 생겨버렸습니다. 따라서 기존의 z-index:1 라는 쌓임 순서는 무의미해져버리는 것입니다.

붉은색 영역과 (파란색 + 초록색) 영역은 서로 다른 맥락에 존재하지만, 쉽게 생각하기 위해 붉은색 영역의 z-index:1 가 사라지고 모두 같은 맥락에 존재한다고 할 수 있습니다.

따라서 요소의 위 아래 위치는 HTML 마크업 순서에 따르게 됩니다.

See the Pen Stacking Order (problem) by ehddud1006 (@ehddud1006-the-looper) on CodePen.

정리하자면, z-index 를 가지고 있는 요소에 1 보다 작은 opacity 값을 주게 되면 z-index 가 사라집니다.

사라진다는 표현은 정확하지 않지만, 없어진다고 생각하고 쌓임 순서를 생각하는게 편리한 것 같습니다.

다른 예시를 봅시다.

.red , .green, .blue 에 z-index: -1 이 적용이 되어있지만, opacity 가 1 보다 작은 경우 z-index 가 없어진다고 생각하기로 했습니다.

따라서 아래예시에는 붉은색 영역만 남아있는 것을 확인할 수 있습니다.

See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen.

다음 예시 입니다.

중앙에 위치한 green 영역에 opacity 가 적용되어 z-index 가 없어진 것으로 생각할 수 있습니다.

See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen.

마지막 예시입니다.

이때까지 배웠던 내용들을 한번에 점검할 수 있는 예시이고, opacity 가 적용되면 새로운 쌓임 맥락이 생성되어 z-index 가 사라진다는 것을 적용해볼 수 있습니다.

추가적으로 div4 는 검은색 요소를 자식으로 가지고 있는데, 같은 쌓임 맥락에 존재하는 경우 z-index 가 음수값을 가질 경우 부모보다 뒤에 위치할 수 있음을 확인할 수 있습니다.

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

참고자료

1. https://mytory.net/archives/10997

2. https://devhoma.tistory.com/105

저작자표시

'FrontEnd > HTML' 카테고리의 다른 글

메타태그와 오픈 그래프, 트위터 카드 (1)	2023.05.08
HTML 공백 처리 방법 (0)	2023.04.30
유니코드란 무엇일까? (UTF-8과 EUC-KR 비교) (1)	2023.04.14