Internet Explorer z-index 버그 해결 방법

Internet Explorer 의 style 랜더링 버그(?)와 관련된 내용입니다. "Squish the Internet Explorer Z-Index Bug"에서 지적하고 있는 내용입니다.
동일한 코드를 브라우저 별로 확인해보면 IE만 다른 모양을 보여주는 것을 확인 할 수 있습니다.
부모의 z-index 값을 absolute 속성을 지닌 자식이 영향을 받아서 의도와 다르게 표시되는 버그입니다.

예제 코드 1

파이어폭스 3.0.6, 크롬 2 Beta, 사파리 4, 오페라 9.64, IE 8에 동일한 코드(1번 예제 코드)를 열었을 때의 모습입니다.

z-index 값이 20인 D1i 가 D1o의 영향으로 z-index 값이 낮은 D2o에 가려지는 모습을 볼 수 있습니다.

예제 코드 2

해결 방법은 D1o에 D2o보다 큰 z-index 값을 적용해서 해결이 가능합니다. 예제 코드 2는 D1o에 z-index 값을 할당해서 의도한 것과 같이 보이도록 한 것 입니다.