반응형
소스코드를 보면 노란 박스가 z-index 가 20인데도 z-index 가 10인 초록색 박스 밑으로 깔려버린다.
두 박스의 차이점은 노란박스를 싸고있는 다른 div 가 하나 더 있다는 차이점 뿐이고, 노란박스를 싸고 있는 div 는
position:relative 로 되어있다는 것이다.
IE 에서만 이런경우 z-index 를 무시해 버린다.
이유는 잘 모르지만 노란박스가 20 의 z-index 값을 갖고있지만 노란박스를 싸고 있는 div 는 z-index 가 지정되지 않아 0 이고, 그의 자식인 노란박스가 그것을 따르는 것 같다.
시험삼아 노란박스를 싸고 있는 div(#container) 에 z-index 20 을 주니 정상적으로 동작했다.
IE 에서는 포지션이 지정된 엘리먼트의 자식노드들은 부모 노드의 z-index 를 따르는 것인가?
반응형
