목차
- z-index 없는 Stacking
- z-index 있는 Stacking
- Stacking context (중요 이것 때문에 씀)
z-index 없는 Stacking
z-index와 Stacking context를 알아보기 전에 z-index를 사용하지 않았을 때, element들이 어떻게 화면에 쌓이는지 알아봅시다.
html 파일 안에 element들은 아래와 같은 순서로 차곡차곡 쌓입니다.
1. root element
2. position을 정의 안한 element
3. position을 정의 한 element
참고로 position를 명시 안하면 기본적으로 static이 부여됩니다.
샘플 화면을 보죠.
아래 그림을 보면 하얀 배경은 위의 규칙 1에 따라 가장 아래에 쌓여있습니다.
이후 2번 규칙에 따라 DIV #5가 그다음으로 쌓여 있습니다.
그리고 position을 정의한 element들이 순서대로 쌓여 있네요.
위의 결과물은 아래 링크에서 확인 가능 합니다.
MDN Web Docs
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
developer.mozilla.org
z-index 있는 Stacking
z-index가 등장했습니다. z-index는 element들이 쌓이는 우선순위를 지정해 줄 수 있습니다. 값이 높을수록 맨 위에 배치됨.
3가지만 알면 됩니다.
기본적으로 z-index를 명시 안 하면 0입니다.
z-index는 정수 범위를 갖습니다. (음수도 가능)
position을 명시해 줘야합니다. (static일 때 적용 안됨)
이번에도 결과물로 확인해 봅시다. 두가지만 확인하면 됩니다.
DIV #5를 보면 position을 명시 안 해줘서 z-index가 적용이 안 돼있는 모습이 보입니다.
나머지 element들은 position을 명시해줘서 z-index가 가장 높은 값이 맨 위로 낮은 값이 아래로 쌓여 있는 모습을 볼 수 있습니다.
위의 결과물은 아래 코드로 확인 가능합니다.
MDN Web Docs
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
developer.mozilla.org
Stacking context
마지막으로 이번 게시물의 핵심 내용인 Stacking context입니다. 이것 때매 씀
먼저 Stacking context란?
element를 가상의 z-axis에 따라 3차원으로 개념화한 것 입니다. 가상의 z-axis는 모니터를 바라보는 축이라고 생각하면 됩니다. element들은 우선순위에 따라 우선순위에 따라 공간을 차지할 수 있는데 위의 z-index를 이용해서 우선순위를 정할 수 있었던 것입니다.
Stacking context는 다음과 같은 상황에서 형성됩니다. (솔직히 Stacking context로 어떤 상황이 발생하는지만 알면 됩니다.)
- Root element of the document (<html>).
- Element with a position value absolute or relative and z-index value other than auto.
- Element with a position value fixed or sticky (sticky for all mobile browsers, but not older desktop browsers).
- Element with a container-type value size or inline-size set, intended for container queries.
- Element that is a child of a flex container, with z-index value other than auto.
- Element that is a child of a grid container, with z-index value other than auto.
- Element with an opacity value less than 1 (See the specification for opacity).
- Element with a mix-blend-mode value other than normal.
- Element with any of the following properties with value other than none:
- Element with an isolation value isolate.
- Element with a will-change value specifying any property that would create a stacking context on non-initial value (see this post).
- Element with a contain value of layout, or paint, or a composite value that includes either of them (i.e. contain: strict, contain: content).
Stacking context으로 인해 발생하는 상황
만약 형제 관계를 갖는 element들이 z-index를 3을 갖는 상황에서 형제 element들 중 하나의 element의 자식 element가 z-index 9999를 갖는다 해도, 형제 노드의 우선순위를 이길 수는 없습니다.
그림으로 보죠.
아래 그림을 보면 DIV #1, #2, #3가 형제 관계이고, DIV #4, #5, #6는 #3의 자식 element들입니다.
여기서 중요한 것은 DIV #4, #5, #6의 z-index가 DIV #1 보다 높은데도 DIV #1 아래에 쌓여 있습니다.
이것이 Stacking context 때문인데요. 자식 element들은 부모 안에서만 우선순위가 유효하게 됩니다. 즉 다른 Stacking context에는 영향을 미치지 않습니다.
위의 결과물에 대한 링크
MDN Web Docs
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
developer.mozilla.org
정리
결론적으로 부모 자식 관계를 가지면 Stacking context가 형성되는데, 이 context내부에서는 z-index로 우선순위를 적용하면 우선순위대로 element가 쌓이게 됩니다. 하지만 다른 부모 자식 관계를 가지는 element(다른 Stacking context)에는 우선순위를 지정하더라도 영향을 줄 수 없습니다. 하지만 형제관계를 가지고 z-index가 정의되면 우선순위가 적용됨.
'프론트엔드 > CSS' 카테고리의 다른 글
| [CSS] container-queries (0) | 2023.12.30 |
|---|---|
| BEM (0) | 2023.03.12 |
