z-index가 동작하지않는 이유 4가지

1. 같은 쌓임 맥락(stacking context)의 요소들은 순서대로 표시된다.

   <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이다.

2. Element의 위치가 설정되지 않았습니다.
   엘리먼트의 위치는 static이 아닌 relative, absolute일 때 표시된다.
3. opacity 또는 transform같은 css 속성들을 설정하면 element가 새로운 stacking context에 배치됩니다.

만약 transform:rotate(180deg)를 준다면 element가 새로운 stacking context에 배치됩니다.그리고 position, z-index를 설정하지 않아도 z-index:0 인 것처럼 동작한다.

4. 부모의 z-index 레벨 때문에 element가 더 낮은 stacking context 안에 있습니다.

동일한 레벨의 stacking context일 때 z-index가 의미가 생긴다.

만약 부모의 z-index:5일 경우, 부모의 형제들이 z-index:6이라면 부모의 자식이 z-index:999라도 부모의 형제들을 이길 수 없다.

참고 : https://medium.com/@erwinousy/z-index%EA%B0%80-%EB%8F%99%EC%9E%91%ED%95%98%EC%A7%80%EC%95%8A%EB%8A%94-%EC%9D%B4%EC%9C%A0-4%EA%B0%80%EC%A7%80-%EA%B7%B8%EB%A6%AC%EA%B3%A0-%EA%B3%A0%EC%B9%98%EB%8A%94-%EB%B0%A9%EB%B2%95-d5097572b82f