<div style="position:relative; background:black; color:white;">
까만놈1
까만놈1
<div style="position:absolute; top:20px; left:40px; background:white; color:black; border:1px solid red; z-index:1000">
창구1
</div>
창구1
</div>
</div>
<div style="position:relative; background:black; color:white;">
까만놈2
<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>
창구2
</div>
</div>
위 예제와 같이 absolute 된 레이어가 position:relative 속성을 가진 영역과 겹칠 있을 경우 " 창구1(absolute 된 레이어)" 이 보이지 않는 문제가 발생한다. 파이어폭스나 크롬 등 웹표준 브라우저에서는 창구1에 z-index:1000 등을 주면 인식을 하지만 IE6에서는 그렇지 않다.
▲ IE6과 7에서는 까만놈1에 가려서 창구1이 안 보인다.
해결책
<div style="position:relative; background:black; color:white; z-index:2000">
까만놈1
까만놈1
<div style="position:absolute; top:20px; left:40px; background:white; color:black; border:1px solid red; z-index:1000">
창구1
</div>
창구1
</div>
</div>
<div style="position:relative; background:black; color:white;">
까만놈2
<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>창구2
</div>
absolute 속성이 있는 div를 감싸는 position:relative 에다가 굵은 글씨로 표시된 것 처럼 z-index 를 주면 된다. 단, absolute 에 준 것 보다 relative 에 준 z-index 값이 더 커야 한다.
그러면 IE6에서도 absolute 된 레이어가 relative 에 가려지는 현상이 없어진다.
만세!
'CSS/UI' 카테고리의 다른 글
| IE6에서 a태그 사용시 밑줄이 너무 붙어버리는 현상 (0) | 2010/01/18 |
|---|---|
| IE6에서 div가 select에 가려지는 현상 해결법 (0) | 2010/01/05 |
| IE6,7 에서 position:relative, position:absolute 속성의 z-index 버그 (4) | 2009/06/15 |
| 크롬(Chrome) 2.0 에서 CSS 해석 문제 (0) | 2009/05/28 |
댓글을 달아 주세요
감사합니다 덕분에 해결했어요~~
많은 도움 되었습니다. 감사합니다.^^
정말 감사합니다!!
이 문제 때문에 해결이 안되서,넘 걱정했는데..
덕분에 해결되었어요^^
감사합니다 ㅠㅠ 덕분에 해결 되었네요~