IE6,7 에서 position:relative, position:absolute 속성의 z-index 버그

IE6이나 7 에서는 position:relative 및 position:absolute 에서 z-index 가 먹지 않는 버그가 있다.

<div style="position:relative; background:black; color:white;">
까만놈1

<div style="position:absolute; top:20px; left:40px; background:white; color:black; border:1px solid red; z-index:1000">
창구1
</div>

</div>
<div style="position:relative; background:black; color:white;">
까만놈2

<div style="position:absolute; top:20px; left:40px; background:white; color:black; border:1px solid red;">
창구2
</div>

</div>

위  예제와 같이 absolute 된 레이어가 position:relative 속성을 가진 영역과 겹칠 있을 경우 " 창구1(absolute 된 레이어)" 이 보이지 않는 문제가 발생한다. 파이어폭스나 크롬 등 웹표준 브라우저에서는 창구1에 z-index:1000 등을 주면 인식을 하지만 IE6에서는 그렇지 않다.

▲ 파이어폭스 및 크롬 등에서 창구1이 정상적으로 출력되는 모습.

▲ IE6과 7에서는 까만놈1에 가려서 창구1이 안 보인다.

해결책

<div style="position:relative; background:black; color:white; z-index:2000">
까만놈1

<div style="position:absolute; top:20px; left:40px; background:white; color:black; border:1px solid red; z-index:1000">
창구1
</div>

</div>
<div style="position:relative; background:black; color:white;">
까만놈2

<div style="position:absolute; top:20px; left:40px; background:white; color:black; border:1px solid red;">
창구2
</div>

</div>

absolute 속성이 있는 div를 감싸는 position:relative 에다가 굵은 글씨로 표시된 것 처럼 z-index 를 주면 된다. 단, absolute 에 준 것 보다 relative 에 준 z-index 값이 더 커야 한다.

그러면 IE6에서도 absolute 된 레이어가 relative 에 가려지는 현상이 없어진다.

만세!