[CSS] opacity를 바꾸면 z-index가 이상한 이유 (Stacking Context)

  z-index는 매우 간단하게 활용할 수 있는 CSS 속성이다. 어떠한 element에 position과 z-index를 지정해주면 z-index값이 높은 element는 위로, z-index값이 낮은 element는 아래로 내려가게 된다. 매우 간단하면서도 이 정도만 알아도 꽤 많은 프로젝트들을 진행하는 데에는 문제가 없었을 것이다.

  그런데 opacity를 적용해서 z-index가 제대로 적용되지 않는 순간부터 문제가 발생한다. opacity는 투명도를 처리하고 z-index는 element의 layer를 다루는데 왜 서로 영향이 있는 것일까? 그에 대해 이해하기 위해서는 Stacking Context, Stacking Order 두 가지 개념에 대한 이해가 필요하다.

 

Stacking Order (쌓임 순서)

  Stacking Order은 어떠한 element가 위에 오고 아래 올지 순서를 의미한다. Stacking Order은 다음과 같은 순서로 처리되며 동일한 레벨인 경우에는 z-index 값에 따라 그 순서가 결정된다. 동일한 레벨이면서 z-index 값도 동일한 경우에는 HTML 상으로 뒤에 위치한 element가 더 위로 올라오게 된다. 여기까지는 기존에 알고 있던 element 배치 순서와 큰 차이가 없을 것이다.

1) position이 지정되었으며 z-index가 음수인 element (제일 아래)

2) position이 지정되지 않은 element

3) position이 지정되었으나 z-index는 지정되지 않은(auto) element

4) position이 지정되었으며 z-index가 양수인 element (제일 위)

 

 

Stacking Context (쌓임 맥락)

  이제 바로 문제의 원인이 되는 Stacking Context다. Stacking Context는 Stacking Order이 함께 적용되는 하나의 그룹으로 이해하면 쉽다. 하나의 Stack Context가 형성되었을 때 그 root element의 Stacking Order는 해당 그룹의 전체에 적용되며 각 element가 가지는 Stacking Order은 해당 Stacking Context 내부에서만 작용한다. 따라서 가장 아래에 위치한 Stacking Context의 element 중 하나에 아무리 높은 z-index 값을 주어도 해당 element는 다른 Stacking Context의 element보다 위로 올라올 수 없다.

  Stacking Context가 형성되는 기준은 다음과 같다. 우리가 주목해야 할 의외의 포인트는 바로 3번째이다.

(1) element가 최상위 element일 때 (즉 html)

(2) element의 position과 z-index가 모두 지정되었을 때

(3) element의 opacity가 1이 아닐 때 (즉 1보다 작을 때)

(4) position : fixed일 때 (z-index 값과는 무관하며 mobile webkit과 chrome 22 이상에만 해당)

 

 

[결론]

(1) element들은 position, z-index, root 여부, opacity 등의 기준에 따라 하나의 기본적인 Stacking Order이 적용되는 그룹으로 묶여서 Stacking Context를 가진다.)

(2) position, z-index, html상 위치 등으로 결정되는 각 element의 Stacking Order은 같은 Stacking Context 내에서 적용된다.

(3) 따라서 Stacking Context가 언제 형성되는지를 제대로 인지하고 z-index 값을 활용해야지 제대로 된 element layer 구조를 정립할 수 있다.