뉴히의 개발 로그
z-index 적용 안됨 현상, z-index란? stacking context란? 본문
z-index란?
z-index는 HTML이 화면에 그려질 때 어떤 요소가 위에 올라가는지를 설정하는 속성이다. z-index의 값이 높을 수록 위에 올라가며 z축 기준으로 순서를 가진다.
z-index는 양수, 음수, auto 값을 가질 수 있으며 따로 지정하지 않으면 auto댜. auto는 z-index를 부모 요소와 동일하게 설정한다. 음수 값을 설정하면, 아래로 깔리게 된다.
반드시 position 속성이 static(기본값)이 아닌 것으로 설정 되어 있어야 한다. z-index의 숫자가 높을 수록 상위에 올라온다.
- z-index는 겹치는 요소의 쌓임 순서를 제어한다
- z-index는 position이 static이 아닌 값을 가진 요소에만 영향을 준다
- stacking context는 z-index에 영향을 주는 그룹이다
- stacking context가 생성된 요소의 자식부터 영향을 준다
- 다른 stacking context에 속한 요소는 서로 z-index의 영향을 받지 않고 stacking context가 생성된 부모의 z-index를 기준으로 평가된다
그러면 z-index가 없을 경우는 요소가 어떤 기준으로 쌓일까? 다음 순서로 아래에서 부터 위로 쌓인다.
- root 요소(최상위 요소 - <html>)
- 자식 요소는 HTML에서 등장하는 순서대로
- position이 지정된 자식 요소들은 HTML에서 등장하는 순서대로
※ HTML 상에 먼저 선언 되었더라도 position이 지정되지 않은 요소는 position 속성이 있는 엘리먼트보다 아래에 깔린다. 단, blue 처럼 z-index가 음수일 경우는 음수가 아래에 깔린다.
z-index가 없을 경우와 z-index가 존재할 경우의 순서를 다시 정리해보면 아래와 같다.
- root 요소(최상위 요소 - <html>)
- z-index 음의 값
- block level 요소
- float 속성이 지정된 요소
- inline level 요소
- z-index 0 값
- z-index 양수 값
stacking context란?
stacking context를 번역하면 ‘쌓임 맥락’이라는 뜻이다. The stacking context - mdn에 따르면, stacking context는 뷰포트 또는 웹페이지를 향하고 있다고 가정되는 사용자에 대해 가상의 z축을 따라 HTML 요소를 3차원으로 개념화한 것이다. HTML 요소는 요소 속성에 따라 우선순위에 따라 이 공간을 차지한다라고 되어있다.
쉽게 말해서 z-index가 적용되는 그룹이 생성된다고 생각하자. 이 그룹이 여러 개 생성되면 서로 다른 그룹끼리 z-index가 적용되지 않는다. stacking context는 다른 stacking context에 포함될 수 있으며, 각 stacking context는 형제 요소와는 완전히 독립적인 요소다. stacking이 처리될 경우 stacking context가 생성된 요소의 하위 요소만 stacking context(그룹)으로 취급되는 것이다.
stacking context 생성 조건
아래는 css를 사용하면서 stacking context가 생성되는 조건인데, 특히 많이 사용될 것 같은 속성만 나열했다. 추가적으로 많은 값은 mdn을 확인하도록 하자.
- opacity 속성을 1보다 작은 값으로 설정
- position 속성이 fixed 또는 sticky로 설정(이 경우에 z-index가 따로 필요하지 않음)
- position 속성이 relative 또는 absolute 이면서, z-index 값이 auto가 아닐 때
- 값이 none이 아닌 아래의 css 요소
- transform
- filter
- backdrop-filter
- mask, mask-image, mask-border
- z-index 속성이 auto가 아니면서 flex 박스 하위 요소
- z-index 속성이 auto가 아니면서 grid 박스 하위 요소
- mix-blend-mode 속성이 normal이 아닌 경우
그리고 isolation: isolation; 속성을 사용하면 z-index를 사용하지 않아도 명시적으로 stacking context를 생성할 수 있다.
z-index가 잘 먹히지 않을 경우는 비교 대상이 같은 stacking context 안에 있지 않은지 확인하고, stacking context를 재설정 하거나 DOM 구조를 변경해야 할 것이다. 하지만, 가장 좋은 방법은 stacking context 존재를 알고, 미리 DOM 구조 설계부터 탄탄하게 만들고나서 구현하는 것이 가장 좋은 방법이겠다.
https://pozafly.github.io/css/stacking-context/#z-index%EB%9E%80
'개발일지 > TIL' 카테고리의 다른 글
| typescript '() => void' 형식은 'MouseEventHandler<HTMLDivElement>' 형식에 할당할 수 없습니다 (0) | 2024.03.26 |
|---|---|
| [React hook form] 라이브러리 사용법 (0) | 2024.03.19 |
| 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)의 개념, 장/단점 (0) | 2023.11.13 |
| RESTFul API란 (0) | 2023.10.30 |
| 프레임워크(Framework)와 라이브러리(Library)의 차이 (0) | 2023.10.20 |
