스태킹 컨텍스트(stacking context)는 가상의 Z축을 사용한 HTML 요소의 3차원 배치 개념이다. 뷰포트(viewport)를 바라보는 사용자의 시선에서 가상의 거리에 존재하는 요소들의 배치를 다룬다. 레이어(layer)의 개념과 다르지 않다.
스태킹 컨텍스트(stacking context)가 발생할 수 있는 경우는 다음과 같다.
html
)position
속성이 absolute
또는 relative
이고 z-index
가 auto
가 아닌 경우position
속성이 fixed
또는 sticky
인 요소z-index
가 auto
가 아닌 경우z-index
가 auto
가 아닌 경우opacity
속성 값이 1
보다 작은 투명도를 가진 요소mix-blend-mode
가 normal
이 아닌 경우isolation
이 isolate
인 요소will-change
의 값으로 초기값이 아닐 때 새로운 스태킹 컨텍스트(stacking context)를 생성하는 속성을 지정한 요소contain
이 layout
, paint
또는 둘 중 하나를 포함하는 값(strict
, content
등)인 요소다음 속성 중에서 하나라도 none
아 아닌 값을 가지는 경우에도 발생한다.
스태킹 컨텍스트(stacking context)가 발생하면 해당 요소의 Z축 위치를 z-index
속성으로 지정할 수 있다.
스태킹 컨텍스트(stacking context)는 자식 요소를 포함하여 적용되기에 부모자식간 경우에는 부모에게 적용한 z-index
값만 유효하다. 형제 관계의 경우에는 z-index
는 분리 적용될 수 있다.