CSS z-index와 쌓임맥락

갓희·2023년 12월 20일

CSS html stacking context z-index 멋쟁이사자처럼 쌓임맥락 프론트엔드

CSS

목록 보기

4/4

이때까지 만들었던 예제들을 보면, 보통 2차원적인 예제들이 많았다.(고 생각한다)
그래서 그동안 x, y 값에 대해서 생각만 했었다.
~~사실 이거만 해도 좀 벅찼다 ㅎㅎ~~

그러다 position: absolute나 relative,
또한 transform 속성에 대해 알고 난 후
위 속성들을 구현하기 위해선 3차원 공간처럼
css에도 z축이 있다는 것을 알게 되었다.

그래서 오늘 포스팅은..
z-index가 뭔지,
그리고 추가로 알아야 할 개념인 쌓임 맥락이 뭔지에 대해
내가 알아본 정보들을 정리해서 적어보려고 한다..!

알면 알수록 신기한 css의 세계~

z-index

위치 지정 요소와 그 자손, 혹은 일반적으로 flex-item의 z축 순서를 지정한다.
initial value: auto, inheritance: no

문법: auto 또는 정수값을 사용한다.
- 값이 auto일 경우, 새로운 쌓임 맥락을 생성하지 않는다.
  쌓임 맥락에서의 위치는 부모 요소와 동일하다는 의미
- 정수값일 경우, 이 값은 해당 요소의 z축 상의 위치를 나타낸다.
- z-index는 position 속성이 설정된 요소에 대해서만 의미를 가진다.
- 자신이 생성한 쌓임 맥락에서 자신의 z축 위치는 0으로 설정된다.
  -> 따라서 그 자손의 z-index를 자기 외의 바깥 요소와 비교하지 않는다.
  (그 자손은 여기서 생성된 쌓임 맥락 위로 쌓이기 때문)
- 더 큰 z-index 값을 가진 요소가 그보다 작은 값의 요소 위를 덮는다.
```
/* Ex */
z-index: -1
z-index: 0;
z-index: 2;
z-index: 999;
```
  위 예시에서 만약 같은 쌓임 맥락 안에 있는 다른 요소들 4개에 순서대로 저 값을 부여해줬다면,
  z-index: 999; 가 지정된 요소가 다 덮는다는 의미이다.

위치 지정 요소(position: static이 아닌 다른 값인 요소)에 대해, z-index 속성은 아래 항목을 지정한다.
- 현재의 쌓임 맥락에서 자신(z-index가 지정된 요소) 의 위치
- 자신만의 쌓임 맥락 생성 여부

z-index를 이해하기 위해선 계속 나오는 단어인 '쌓임 맥락'에 대해서도 숙지를 해야한다.
따라서, z-index는 잠시 제쳐두고 쌓임 맥락에 대해 알아보자.

쌓임 맥락 (Stacking Context)

가상의 Z축을 사용한 html 요소의 3차원 개념화
각각의 html 요소는 자신의 속성에 따른 우선순위를 사용해 3차원 공간을 차지한다.

쌓임 맥락을 형성하는 요소의 조건

문서의 루트 요소 (<html>)
position이 absolute 또는 relative이며,
z-index가 auto가 아닌 요소 (두 가지를 모두 만족해야 한다.)
position이 fixed 또는 sticky인 요소
flex-item 중 z-index가 auto가 아닌 요소
opacitiy가 1보다 작은 요소
mix-blend-mode가 normal이 아닌 요소
아래 속성 중 하나라도 none이 아닌 값을 가진 요소
- transform
- filter
- backdrop-filter
- perspective
- clip-path
- mask / mask-image / mask-border

이 외에도 여기를 클릭하면 쌓임 맥락을 형성하는 요소의 조건을 더 알아볼 수 있다.

쌓임 맥락의 특징

쌓임 맥락 속 자식 요소의 z-index 값은 부모에게만 의미가 있다.
하나의 쌓임 맥락은 부모의 쌓임 맥락 속에서 통째로 하나의 단위로 간주된다.
각각의 쌓임 맥락은 독립적이다.
어느 요소든 콘텐츠를 쌓은 후에는 그 요소를 통째로 부모의 쌓임 맥락 안에 배치한다.
모든 요소가 쌓임 맥락을 생성하는 것은 아니다.
쌓임 맥락 내부에 또 쌓임 맥락이 포함될 수 있다.
-> 쌓임 맥락은 계층 구조를 이루며,
쌓임 맥락의 계층 구조는 html 요소 계층 구조의 부분집합이다.
자신의 쌓임 맥락을 만들지 않을 경우, 부모/조상의 쌓임 맥락에 의해 동화된다.

tmi지만 나는 쌓임 맥락을 캔버스라고 생각한다.
각 요소들이 물감을 칠할 수 있는 바탕? 배경? 같은..
뭔가 '맥락'이라고 하니 어렵게 다가와서
이렇게 생각하니까 훨씬 이해가 잘 되었다.
~~물론 쌓임 맥락의 구조가 더 복잡하고 어렵다~~

z-index가 없는 경우의 쌓임

모든 요소들에 z-index가 지정되지 않았을 경우,
쌓임 맥락이 생성되지 않았을 경우
요소들은 다음 순서로 쌓인다. (아래에서 위로)

1. 루트 요소의 배경과 테두리

루트 요소(일반적으로 <html>요소)의 배경과 테두리는
쌓임 맥락에서 가장 낮은 레이어로 간주한다.

2. 위치가 지정되지 않은 하위 요소

position 속성이 static으로 설정된 요소
root 요소 이후, 위치가 지정되지않은 요소들은 html에 나타나는 순서대로 쌓인다.
마지막에 나타난 것이 가장 위에 쌓인다.

3. 위치가 지정된 하위 요소

position 속성이 static이 아닌 값으로 설정된 요소
나타난 순서대로 위치가 지정되지 않은 요소 위에 쌓인다.

(웹사이트에 렌더링되는 순서)

z-index가 있는 경우의 쌓임 "맥락"

z-index 속성을 사용하면 위에서의 쌓임을 무시하고,
html 문서 상에서 먼저 나온 요소를 나중에 나온 요소보다 앞으로 나오게 할 수 있다.

브라우저는 z-index 속성값이 낮은 요소를 먼저 나타내고,
z-index 속성값이 높은 요소를 그 다음에 나타내기 때문에
만약 요소가 겹쳐있을 경우 z-index 속성값이 큰 요소가 속성값이 작은 요소의 일부를 가리거나 전체를 덮을 수 있다.

z-index가 있는 경우의 쌓임 맥락은 예시를 통해 이해하는 것이 훨씬 빠르고 직관적이므로, 예시를 통해 알아보겠다.

/* html, z-index 설명에 필요하지 않은 마크업은 제외함 */
<div id="div1">
  DIV #1
  position: relative;
  <div id="div2">
	DIV #2
    position: absolute;
    z-index: 2;
  </div>
</div>

<div id="div3">
  DIV #3
  position: relative;
  z-index: 1;
  <div id="div4">
    DIV #4
    position: absolute;
    z-index: 10;
  </div>
</div>

/* css, z-index 설명에 필요하지 않은 속성은 제외함 */
#div2 {
  z-index: 2;
}
#div3 {
  z-index: 1;
}
#div4 {
  z-index: 10;
}

#div1,
#div3 {
  position: relative;
}

#div2 {
  opacity: 0.8;
  position: absolute;
}

#div4 {
  opacity: 0.8;
  position: absolute;
}

이 코드를 돌려보면 아래와 같은 결과값이 나온다.

여기서 의문인 점을 미리 정리해보자면
1. div1도 쌓임 맥락을 생성하는가?
2. div4의 z-index값이 div2보다 더 큰데 왜 div2보다 밑에 가려졌는가?
로 추려질 것 같은데, 하나하나 설명을 해볼 것이다.

먼저, div1은 쌓임 맥락을 생성하지 않는다.
position은 relative이지만, z-index 값이 auto이기 때문이다.
따라서, div2는 div3과 같은 루트 요소의 쌓임 맥락에 속한다.
여기서 div2의 z-index 값이 div3보다 높기 때문에 div2가 div3 위로 쌓인다.

문제는, div4의 z-index 값이 div2보다 높은데 왜 div4가 div2 밑에 있는가? 이것이다.
그 이유는 애초에 쌓임 맥락 속 자식 요소의 z-index 값은 부모에게만 의미가 있기 때문이다.
그래서 div4의 z-index: 10; 또한, 부모인 div3에게만 의미가 있다.
만약 div4에 z-index를 9999로 주어도, 여전히 div2보다 밑에 있다.