<div class="stacking_context01">요소1</div> <div class="stacking_context02">요소2</div> <div class="stacking_context03">요소3</div>
이 상태에서 요소들이 겹쳐진다면 요소1위에 요소2가 겹치고 요소2 위에 요소3이 겹쳐질 것이다.
즉, 요소3만 보이게된다.
요소들에 z-index가 설정되지 않아도 stacking order에 의해 요소들의 위치가 결정된다.
위의 예제의 경우 요소들에 z-index 값이 none이다.
만약 transform:rotate(180deg)를 준다면 element가 새로운 stacking context에 배치됩니다.그리고 position, z-index를 설정하지 않아도 z-index:0 인 것처럼 동작한다.
동일한 레벨의 stacking context일 때 z-index가 의미가 생긴다.
만약 부모의 z-index:5일 경우, 부모의 형제들이 z-index:6이라면 부모의 자식이 z-index:999라도 부모의 형제들을 이길 수 없다.