CSS Stacking Context & z-index

Marullo·2021년 4월 7일

Again HTML, CSS

목록 보기

12/13

Reference
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
https://dongmin-jang.medium.com/css-stacking-context-172f9bd1af8b

z-index

Position 속성을 사용하다보면, 여러 UI 요소들이 겹치는 현상이 발생한다.
기본적으로 HTML 요소는 나중에 작성된 태그가 위에 쌓인다.
내부적으로 모든 HTML 요소는 z-index라는 것이 결정되어, 누가 위에 배치될지 결정된다.
그리고 우리는 z-index를 조작할 수 있다.

z-index를 조작하려면 해당 element의 position 속성이 relative, absolute, fixed 값을 가져야 한다.
position 속성이 사용되었을 때, z-index를 조작하지 않으면 auto라는 값을 갖게된다.
우리는 z-index에 음수/양수를 할당해 줄 수 있는데, 큰 값일수록 위에 배치된다.

Stacking Context

모달-다이얼로그 컴포넌트를 제작하거나, 팝업창을 제작할 때 z-index를 아무리 높게 잡아도 다른 컴포넌트 아래에 위치하는 경우가 있다. 이런 현상이 발생하는 원인을 이해하려면 Stakcing Context(쌓임 맥락)을 알아야한다.

[1] Stacking Context란?

The stacking context is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user, who is assumed to be facing the viewport or the webpage. The rendering order of certain elements is influenced by their z-index value

2차원으로 보이는 HTML element 중, 몇 개의 element는 z축으로 element를 쌓아올리는 Stacking Context를 생성하고, Stacking Context에 의해 어느 element가 화면 상에서 위에 존재하는지 결정된다. 이 Stacking Context는 z-index로 조절된다.

[2] Stacking Context를 만드는 Element들

HTML Root Element <html>
position 속성이 지정되고, z-index 속성이 auto가 아닌 값이 할당된 Element
z-index가 auto가 아닌 값이 할당딘 flex요소
opacity가 1보다 적게 지정된 Element

보통 element가 겹치는 경우는 모달-다이얼로그, 팝업창 같이 position 속성을 지정해줘야 할 때 생긴다.
이럴 때, Stacking Context를 고려하자.

[3] Stacking Context는 다른 Stacking Context에 포함 가능

하나의 Stacking Context는 다른 Stacking Context에 포함될 수 있다.
즉 Stacking Context를 만드는 Element가 부모-자식 관계로 놓일 수 있다는 것이다.

[4] !z-index가 제대로 동작하지 않는 이유

부모 Stacking Context는 자손 Stacking Cotnext와는 완전히 독립되어 있다. 반대로 자손 Stacking Context는 부모의 Stacking Context에 영향을 받는다.

<div id="aunt">
<div id="parent">
  <div id="child"></div>
</div>
</div>

lower의 부모는 container와 upper다. 이럴 때 부모와 부모의 형제들 끼리의 z-index를 먼저 비교한다.
내 부모가 부모의 자손보다 z-index가 작으면(부모가 sibling중 작은 z-index를 가지고 있으면), 자손의 z-index가 1억이라고 해도 부모의 형제 위로 올라갈 수 없다.

z-index는 형제끼리 비교한다고 보면 된다. 자식들은 자식들끼리 z-index로 rendering order가 결정되고
부모는 부모들끼리 z-index로 redering order를 결정한다.

자식의 z-index가 아무리 높아도, 부모(집안이라고 하자) 집안의 상하관계를 뛰어넘을 수 없다.