스택 컨텍스트 이해하기

1. 맨 밑에 [부모요소] 컨테이너(<div class="container>)의 배경과 테두리가 깔리고, 내부 각 DIV 요소들은 (모두 position 속성이 정의되어 있기에)문서의 일반 흐름 순으로(코드가 작성된 순서대로) 위로 겹쳐가며 표시된다:

☞ [DIV #1]과 [DIV #2]는 투명도를 1보다 적은 값으로 지정하였기에 [부모요소] 내부에서 쌓임 맥락을 만든 것처럼 보이는 것인데, 이는 마치 z-index를 설정한 것처럼 보인다!

2-1. div1-2에 z-index: 2; 값을 주었다: 이제, div1-2가 맨 위로 올라온다!

2-2. div2-2에 z-index: 3; 값을 주었다: 다시, div2-2가 맨 위로 올라온다!

☞ div #1-2와 div #2-2는 서로 부모가 다르고, 따라서 형제가 아님에도 z-index 값을 써서 서로간 쌓임 순서를 바꾸었다 - 이는 [DIV #1]과 [DIV #2] 모두 z-index(또는 position 속성)를 이용한 독자적 쌓임 맥락을 만들지 않았기에 div #1-2와 div #2-2는 둘 다 최상위 <div> 부모 컨테이너의 쌓임 맥락에 속해있고, z-index 값을 변경하여 쌓임 순서를 바꿀 수 있는 것이다!

3. [DIV #2]에 z-index: 1; 값을 주었다: 다시, div1-2가 맨 위로 올라온다!

☞ 여기서 문제는, div #2-2가 div #1-2보다 z-index 값이 높음에도 밑에 있다는 점이다! 이는 [DIV #2]에 z-index: 1; 값이 설정됨으로 인해, [DIV #2]는 자식요소 div #2-2를 포함하는 자신만의 독자적인 z-index 쌓임 맥락을 만들게 된 때문이다. 반면, 쌓임 맥락을 만들지 않은 [DIV #1]은 z-index의 쌓임 맥락 계층구조에서는 완전히 벗어나고, z-index: 2;가 설정되어 있는 자식요소 div #1-2는 z-index: 1;인 [DIV #2](& div #2-2)의 쌓임 맥락보다 위에 자리잡게 되는 것이다. 결론적으로, [최상위 컨테이너](<div class="container>) 내부에서 (일반 흐름의)[DIV #1] -> (z-index: 1;인)[DIV #2](& div #2-2) -> (z-index: 2;인)div #1-2 순으로 겹쳐서 표시되는 것이다!