스태킹 컨텍스트(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는 분리 적용될 수 있다.