티스토리 뷰

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 에 가려지는 현상이 없어진다.


만세!
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함