위와 같은 css와 html을 적용했을 때
원하는 출력 화면은 box1이 box2보다 위에 있는 모습일 것이다.

우선 .box1, .box2 요소가 z-index 를 따로 선언해주지 않았기 때문에 큰 영향이 없는 상황에서
.box1 .inner_box 가 z-index:10
.box2 .inner_box 가 z-index:1 을 주었기 때문에
생각하고 있는 이론 상엔 box1 영역이 제일 위로 와야하지만
box2 영역이 오히려 위쪽으로 위치하게된다.

그 이유는 바로 .box1에 적용한 transform 값 때문이다.
.box1의 .inner_box 에 아무리 높은 z-index 를 주게되어도
.box1에 transform 값을 주게되면 .box1 영역은 z-index:0으로 임의 지정이 되기 때문이다. (opacity 도 이슈 있음)

해결 방안은 다음과 같다.
부모 요소가 자동으로 "z-index: 0" 이 되기 떄문에, 자식 요소에 아무리 z-index 를 설정하여도 반영되지 않는다.
그렇기에 부모 요소에 아래와 같이 z-index 와 position 를 설정해주면 부모 z-index 우선순위에 의해 자식 정보가 노출 될 수 있다.
box3 { position: relative; z-index: 10; }