CSS에서 z-index의 우선순위 이해하기

웹 개발에서 요소들이 겹쳐서 표시될 때, 어떤 요소가 다른 요소 위에 위치할지 결정하는 것은 중요합니다. 그 중심에는 z-index와 Stacking Context(쌓임 맥락)라는 개념이 있습니다. 이 글에서는 z-index의 동작 원리와 Stacking Context가 어떻게 함께 작동하는지에 대해 자세히 설명하겠습니다.

z-index란 무엇인가?

z-index는 CSS에서 요소가 화면에서 수직적으로 쌓이는 순서를 결정하는 속성입니다. 기본적으로 HTML 문서에서 요소들은 등장 순서대로 화면에 쌓이지만, position 속성과 함께 z-index를 사용하면 그 순서를 변경할 수 있습니다.

z-index가 적용되는 조건

z-index가 제대로 동작하기 위해서는 요소가 반드시 포지셔닝(positioning) 되어 있어야 합니다. 

즉, position: relative, absolute, fixed, sticky 중 하나여야 하고, position: static에서는 z-index가 무시됩니다.

/* z-index가 적용되지 않음 */
div {
    position: static;
    z-index: 10;
}

/* z-index가 적용됨 */
div {
    position: relative;
    z-index: 10;
}

Stacking Context (쌓임 맥락)

Stacking Context(쌓임 맥락)는 요소가 쌓이는 방식에 영향을 미치는 독립적인 레이어입니다. 새로운 Stacking Context가 생성되면 그 안에 있는 모든 요소는 다른 Context와 독립적으로 쌓이며, Context 내부의 z-index 값만 서로 비교됩니다.

Stacking Context를 생성하는 조건

• position: relative, absolute, fixed 등의 포지셔닝과 함께 z-index가 설정된 경우.

• opacity가 1보다 작은 경우 (opacity: 0.5).

• transform, filter, perspective와 같은 속성이 적용된 경우.

• will-change, mix-blend-mode, isolation: isolate 등의 CSS 속성이 설정된 경우.

z-index와 Stacking Context의 상호작용

z-index를 설정하였음에도 적용되지 않는 경우는 대부분 Stacking Context로 발생하는 문제입니다.

Stacking Context는 서로 독립적이며, 형제 Stacking Context 간에는 z-index 값 비교가 이루어지지 않습니다. 즉, 하나의 Stacking Context 안에서만 z-index 값이 작동합니다.

Stacking Context의 독립성

형제 Stacking Context는 서로 영향을 주지 않습니다.

• 예를 들어, parent 요소가 z-index: 1이고, 그 내부 자식 요소가 z-index: 10이라고 하더라도, 이는 parent의 Stacking Context 내에서만 유효합니다.

• 형제 Stacking Context 간의 z-index 값은 비교되지 않으며, 각각 독립적으로 쌓입니다.

위 코드에서

• parent는 position: relative와 z-index로 인해 Stacking Context를 형성합니다. 그 내부 자식 요소 child는 z-index: 10이지만, 이는 parent의 맥락 내에서만 적용됩니다.

• overlay는 position: absolute와 z-index: 2로 별도의 Stacking Context를 형성하며, 이는 parent와 독립적인 쌓임을 가집니다.

결과적으로 overlay는 parent와 그 자식 요소 child보다 더 위에 쌓입니다. 이는 child의 z-index 값이 10이어도, 그것이 자신의 부모 Stacking Context에서만 유효하기 때문입니다.

z-index 우선순위 결정

z-index 우선순위는 기본적으로 Stacking Context 내에서만 결정됩니다. 다음은 z-index 우선순위가 적용되는 순서입니다.

1. 새로운 Stacking Context가 생성되는지 확인합니다.

2. Stacking Context 내부에서 z-index 값을 기준으로 요소들이 쌓입니다.

3. 형제 Stacking Context 간에는 z-index 값 비교가 이루어지지 않으며, 각각 독립적으로 쌓입니다.

결론

z-index는 요소가 화면에서 겹쳐질 때 그 순서를 결정하는 중요한 속성입니다. 하지만 z-index의 동작을 완전히 이해하려면 Stacking Context라는 개념을 이해하는 것이 필수적입니다. 각각의 Stacking Context는 독립적으로 작동하며, 형제 Stacking Context와는 분리되어 쌓임 순서가 결정됩니다.

이를 명확히 이해하면 복잡한 레이아웃과 시각적 구성 요소들이 겹칠 때 그 배치 순서를 더 쉽게 관리할 수 있습니다. 다음 번에 요소들이 예상한 대로 쌓이지 않는다면, 이 두 개념을 다시 떠올려보세요.