기술 블로그
[TIL] 쌓임 맥락 본문
반응형
만약 아래와 같이 div 요소 3개가 있다고 하자
각각의 z-index는
검은색 2
빨간색 1
빨간색의 자식요소인 파란색은 3이다.
코드는 아래와 같다 .
<!doctype html>
<html>
<body>
<div class="black">
</div>
<div class="red">
<div class="blue"/>
</div>
</body>
</html>
.black {
background-color:black;
color:white;
width:100px;
height:100px;
z-index:2;
}
.blue{
background-color:blue;
color:white;
width:40px;
height:40px;
z-index:3;
}
.red {
display:flex;
justify-content:center;
align-items:center;
background-color:red;
width:100px;
height:100px;
z-index:1;
}
그럼 이 3개를 겹치면 어떤일이 일어날까?
z-index가 3인 파란 요소가
z-index가 2인 검은요소 아래 위치하게 된다.
위와 같은 현상을 쌓임맥락에 의한 현상이라고 한다.
자식의 z-index 값은 부모에게만 의미가 있다. -MDN
즉 z-index의 값은 전역적인 범위를 갖지 못한다.
참고 - 쌓임 맥락 성립 조건
- 문서의 루트 요소. (<html>)
- position이 absolute 또는 relative이고, z-index가 auto가 아닌 요소.
- position이 fixed 또는 sticky인 요소. (sticky는 모든 모바일 브라우저에서는 해당하지만 구형 데스크톱 브라우저에서는 해당하지 않음)
- 플렉스(flexbox (en-US)) 컨테이너의 자식 중 z-index가 auto가 아닌 요소.
- 그리드(grid (en-US)) 컨테이너의 자식 중 z-index가 auto가 아닌 요소.
- opacity가 1보다 작은 요소. (불투명도 명세 참고)
- mix-blend-mode가 normal이 아닌 요소.
- 다음 속성 중 하나라도 none이 아닌 값을 가진 요소.
- isolation이 isolate인 요소.
- -webkit-overflow-scrolling이 touch인 요소.
- will-change의 값으로, 초깃값이 아닐 때 새로운 쌓임 맥락을 생성하는 속성을 지정한 요소.
- contain이 layout, paint, 또는 둘 중 하나를 포함하는 값(strict, content 등)인 요소.
반응형
Comments