기술 블로그

[TIL] 쌓임 맥락 본문

카테고리 없음

[TIL] 쌓임 맥락

jaegwan 2023. 10. 20. 17:41
반응형

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context

 

쌓임 맥락 - 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의 값은 전역적인 범위를 갖지 못한다. 

참고 - 쌓임 맥락 성립 조건

반응형
Comments