기술 블로그
[TIL] 쌓임 맥락 본문
반응형
쌓임 맥락 - CSS: Cascading Style Sheets | MDN
쌓임 맥락(stacking context)은 가상의 Z축을 사용한 HTML 요소의 3차원 개념화입니다. Z축은 사용자 기준이며, 사용자는 뷰포트 혹은 웹페이지를 바라보고 있을 것으로 가정합니다. 각각의 HTML 요소는
developer.mozilla.org
만약 아래와 같이 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