stacking context 에 대한 고찰(feat. z-index)

 

어느날 z-index가 적용이 안되는 문제가 발생해서

 

원인을찾다보니 stacking context라는 이론까지 도달하게되었다 

 

내가 정리한내용을 살펴보자

 

아래에 나올 내용에 대해 이해한대로 간략하게 정리해보자면

stacking context
 -> html elements를 쌓기위한 자료 (z-index를 적용한 elements에서부터 시작)
stacking order
 -> html elements를 어떻게 쌓을지에 대한 정책

 

 

1. z-index를 적용하는순간 stacking context가 만들어진다

2. html document의 모든 elements는 document내에서 다른 element 보다 앞에 있거나 뒤에 있을 수 있다.
이것이 stacking order

3. z-index는 position 을 갖고 있는 element 위에서 작동한다

(매우 중요)

4. position 을 갖고 있지않는 element 에 z-index를 적용하려고 한다면 작동하지 않는다  

(사실 이게 더 중요!!)

새로운 stacking context가 element에 생성되는 방법

1. element가 document 의 root element 일 때
2. element 가 static 이 아닌 다른 position 값을 가지고, z-index 값이 auto 가 아닐 때
3. element 가 1보다 작은 opacity 값을 가질 때
세번째 방법은 w3c 스펙 문서외에서는 거의 언급이 되지 않고 있다.(개꿀 끄트머리 지식+++)

 

 

stacking context (뒤에서 앞으로) 안에서 stacking order를 결정하는 기본적인 규칙

1. stacking context의 root element
2. z-index를 음수값으로 갖는 positioned element (children 포함)
(높은 값은 낮은 값보다 앞에 쌓입니다. 같은 값은 HTML의 모양에 따라 쌓입니다.)
3. Non-positioned (HTML의 모양에 의한 순서)
4. auto 를 z-index 값으로 갖는 Positioned elements (children 포함)
(HTML의 모양에 의한 순서)
5. 양수의 값을 z-index값으로 갖는 Positioned elements(children 포함)
(높은 값은 낮은 값보다 앞에 쌓입니다. 같은 값은 HTML의 모양에 따라 쌓입니다.)

 

 

정리

 

1. z-index 는 position이 static이 아닌 html elements에만 적용

 

2. z-index를 적용하면 stacking context 생성되며 stacking order에 따라 html elements들이 배치된다

 

3. 공부는 끝이없다 (사실 이말이 하고싶었음)