1. z-index가 왜 제대로 설정이 안 될까?
프론트개발을 하다 보면 이런 경험을 대부분 한 번씩 겪게 된다.
필자의 경우를 예시로 설명을 하자면,
위처럼 지도 위에 있는 ButtonGroup이 z-index가 1000이고, 오른쪽 사진의z-index가 2000에도 불구하고, 버튼 그룹이 모달 위에 뜨는 것을 확인할 수 있다.
왜???????????? why????????????????????????
2. stacking context(쌓임 맥락)
stacking context 개념 때문에 그렇다. stacking context가 뭘까?
stacking context 는 HTML 요소들이 3차원 공간에서 어떤 순서로 쌓이는지를 결정하는 독립적인 레이어이다.
MDN에서 말하는stacking context의 생성 조건은 다음과 같다.
- 문서 루트:
<html>요소 - Position + z-index:
position: absolute/relative+z-index: auto 아님 - Fixed/Sticky:
position: fixed/sticky - Container Queries:
container-type: size/inline-size - Flex/Grid 자식:
z-index: auto 아님 - 투명도:
opacity < 1 - 블렌드 모드:
mix-blend-mode ≠ normal - Transform 계열:
transform/filter/backdrop-filter/perspective/clip-path/mask ≠ none - 격리:
isolation: isolate - 성능 힌트:
will-change(stacking context 생성 속성 지정 시) - Containment:
contain: layout/paint/strict/content - Top Layer: fullscreen, popover 요소와
::backdrop
이렇게 조건을 전부 다 보고 고려하여 구현하기에는 어렵다.
우리가 핵심적으로 볼 것은 뭐냐? 하나의 stacking context 은 부모 stacking context 안에서 통째로 하나의 단위로 간주되는 것이 핵심이다.
z-index를 사용할 때 자식의 z-index 값은 부모에게만 의미가 있다는 것이다.
MapComponent
├── ButtonGroup (z-index: 1000)
└── Search
└── Modal (z-index: 2000)
위의 사진을 예시로 설명을 하자면, ButtonGroup은 z-index:1000, Modal은 z-index:2000에 위와 같은 구조로 존재했다.
이 경우 Modal의z-index:2000은 Search stacking context 안에서만 의미가 있다.MapComponent라는 부모가 바라보기에 ButtonGroup이라는 자식의 stacking context 는 z-index:1000을 가지고 있고, Search라는 자식의 stacking context 는 z-index:2000이 아닌, z-index:0이라는 것이다.
A의 부모 B가 있고, B의 부모 C가 있다고 할 때, C가 보기에는 A의 z-index가 뭐든 간에 통째로 B라는 하나의 뭉텅이로 보인다는 것이다.
이러한 설명과 동일한 예시를 아래 html과 css로 작성을 해보았다.
See the Pen Untitled by 김도현 (@ogicrxrt-the-sasster) on CodePen.
위의 설명이 잘 이해가 되었다면, 필자가 아까 경험했던 상황에서 해결책은 쉽게 도달할 수 있다.
Map (root stacking context)
├── ButtonGroup (z-index: 100)
└── LeftModal (z-index: 1000) ← 새로운 stacking context 생성
└── PrivacyPolicyModal (z-index: 2000)
부모인 LeftModal의 z-index:1000을 추가를 해주고, ButtonGrup은 100으로 낮춰서 Map이라는 부모 밑의 자식 stacking context에서 z-index를 차이를 줘서 해결을 할 수 있었다.
stacking context 에 대한 더 자세한 설명은 아래 링크의 MDN을 참고하길 바란다.
쌓임 맥락 - CSS: Cascading Style Sheets | MDN
쌓임 맥락(stacking context)은 가상의 Z축을 사용한 HTML 요소의 3차원 개념화입니다. Z축은 사용자 기준이며, 사용자는 뷰포트 혹은 웹페이지를 바라보고 있을 것으로 가정합니다. 각각의 HTML 요소는
developer.mozilla.org
'HTML + CSS +JavaScript' 카테고리의 다른 글
| [JavaScript] Date format /날짜 형식 쉽게 바꾸기 ( yyyy-mm-dd) (0) | 2024.08.16 |
|---|---|
| [CSS] textarea 오른쪽 하단 지우기 / 빗금 삭제 / 사이즈 조절 지우기 (0) | 2024.08.16 |
| [자바스크립트] JavaScript의 기본 문법 -1 (1) | 2024.03.27 |
| [HTML] HTML의 기본개념과 주요태그 (0) | 2024.03.18 |
