z-index, 쌓임 맥락

📌 z-index

요소들의 쌓임 순서를 정하는 2가지 조건

• position 속성 설정
• z-index 속성 설정
  
  

z-index: 정수값

position 속성이 되어있으면, z-index로 쌓임순서를 정할 수 있다.
position 속성이 되어있지 않으면, 기본적으로 0에 위치함.

📍 z-index가 없으면

• 다음과 같은 순서를 가지게 된다.
• 동일한 순서일 경우, HTML 소스에 쓰여진 순서대로 결정

1. 루트 엘리먼트 배경, 테두리
2. posistion 속성 / floated 속성이 설정되지 않은 block level 엘리먼트
3. posistion 속성이 설정되지 않은 floated 엘리먼트
4. position 속성이 설정되지 않은 inline 엘리먼트
5. posistion 속성이 설정된 엘리먼트

---

📌 쌓임 맥락

• 가상의 Z축을 사용한 HTML 요소의 3차원 개념화
• 특정 요소의 렌더링 순서는 z-index 속성에 의해 결정
• 요소들이 가진 속성으로 인해 쌓임 맥락 생성

아래 조건을 만족할 경우 생성
1. 문서의 루트 요소 (html)
2. position이 absolute, relative이며, z-index가 auto가 아닌경우
3. position이 fixed, sticky인 요소
4. flexbox 컨테이너의 자식 중 z-index가 auto가 아닌 요소
5. grid 컨테이너의 자식 중 z-index가 auto가 아닌 요소
6. opacity가 1보다 작은 요소

📍 쌓임 맥락 내부의 자식 요소의 특징

• 쌓임 맥락 생성 규칙 및 z-index에 의해 동일하게 쌓임
• 쌓임 맥락 내부에 또 쌓임 맥락이 포함 될 수 있음
  그래서 쌓임 맥락은 계층 구조를 이룬다.
  - 모든 html 요소가 쌓임 맥락은 가지는 것은 아니다.
  - 쌓임 맥락 계층 구조는 html 요소 계층구조는 부분집합
• 자식의 z-index 값은 부모 요소 내부에서만 의미 있음