개요
CSS에서 Z축을 표현할 때는 주로 z-index 속성에 정수 값을 입력하여 어떤 요소를 위로 올릴지 결정한다.
아래 그림처럼 z-index 값이 클수록 요소가 더 위에 쌓이는 것을 확인할 수 있다.
이슈
그러나 z-index는 단순히 요소를 위로 올리는 속성이라고 생각했던 찰나, z-index 값을 아무리 높게 설정해도 요소가 위로 올라오지 않는 현상을 발견했다.
아래 그림에서는 모달창이 헤더 아래에 가려져 있는 모습을 확인할 수 있으며, 이때 모달의 z-index는 101이고 헤더는 100으로 설정되어 있다.
z-index를 높게 설정하면 낮은 값의 요소보다 위에 표시되어야 하는 것이 아닌가? 라는 의문이 들었고, 이 궁금증을 해결하기 위해 z-index와 쌓임 맥락(Stacking Context)에 대해 자세히 조사해보기로 하였다.
z-index에 대해서
HTML에서는 기본적으로 나중에 작성된 요소가 먼저 작성된 요소보다 위에 쌓이게 된다. 이를 상대적 위치라고 한다.
See the Pen 상대적 깊이 예시 by oko_jin (@Hwangyongjin) on CodePen.
position을 static이 아닌 값(relative, absolute, fixed, sticky)으로 설정하면 static인 요소보다 우선순위가 높아진다.
이때 position이 static이 아닌 요소가 여러 개일 경우, 이들 사이에서는 상대적 위치가 적용된다.
See the Pen position-stacking by oko_jin (@Hwangyongjin) on CodePen.
z-index를 사용하기 위해서는 position 속성을 static이 아닌 값으로 설정해야 한다.
그렇지 않으면 z-index의 효과가 적용되지 않는다.
아래 예제에서는 box1의 z-index 값이 2임에도 불구하고, box2보다 아래에 위치해 있는 모습을 확인할 수 있다.
See the Pen z-index stacking by oko_jin (@Hwangyongjin) on CodePen.
z-index를 적용할 모든 요소에 position을 static 외의 값으로 설정 함으로써 position에 의한 z-index 문제를 해결할 수 있다.
See the Pen all z-index with position by oko_jin (@Hwangyongjin) on CodePen.
쌓임 맥락(Stacking Context)
z-index를 설정한 요소는 HTML 문서 전체에서 값을 비교하여 우선순위를 정하는 것이 아니라, 쌓임 맥락(Stacking Context) 내에서 우선순위를 결정하게 된다.
아래 예시를 통해 이를 확인해보자.
See the Pen Untitled by oko_jin (@Hwangyongjin) on CodePen.
box1은 z-index 값이 10임에도 불구하고, z-index 값이 2인 box2보다 아래에 위치해 있다.
그 이유는 box1의 부모 요소인 box1_wrapper에 z-index 값이 1로 설정되어 있어, 부모 요소 자체가 box2에 가려지기 때문에 box1 역시 함께 가려지게 된다.
See the Pen stacking context 2 by oko_jin (@Hwangyongjin) on CodePen.
반면, 부모 요소에 z-index가 적용되지 않은 경우에는 별도의 쌓임 맥락이 형성되지 않아 box1이 box2보다 위로 올라올 수 있다.
즉,z-index가 적용된 요소는 z-index 값이 지정된 부모 요소 내에서만 우선순위를 비교하며, 이를 쌓임 맥락(Stacking Context)이라고 한다.
문제 해결
이를 해결하기 위해z-index가 101로 설정된 모달창의 쌓임 맥락을 확인해본 결과, 부모 요소 중 하나에 z-index가 50으로 설정되어 있는 것을 발견했다.
이 값을 50에서 101로 수정하고, 모달창 자체의 z-index는 제거함으로써 문제를 해결할 수 있었다.
