티스토리 뷰
IE6이나 7 에서는 position:relative 및 position:absolute 에서 z-index 가 먹지 않는 버그가 있다.
위 예제와 같이 absolute 된 레이어가 position:relative 속성을 가진 영역과 겹칠 있을 경우 " 창구1(absolute 된 레이어)" 이 보이지 않는 문제가 발생한다. 파이어폭스나 크롬 등 웹표준 브라우저에서는 창구1에 z-index:1000 등을 주면 인식을 하지만 IE6에서는 그렇지 않다.
▲ 파이어폭스 및 크롬 등에서 창구1이 정상적으로 출력되는 모습.
▲ IE6과 7에서는 까만놈1에 가려서 창구1이 안 보인다.
해결책
absolute 속성이 있는 div를 감싸는 position:relative 에다가 굵은 글씨로 표시된 것 처럼 z-index 를 주면 된다. 단, absolute 에 준 것 보다 relative 에 준 z-index 값이 더 커야 한다.
그러면 IE6에서도 absolute 된 레이어가 relative 에 가려지는 현상이 없어진다.
<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 |
크롬(Chrome) 2.0 에서 CSS 해석 문제 (1) | 2009.05.28 |
공유하기 링크
- TAG
- css, IE6, position:absoulute, position:relative, 버그, 웹표준
댓글
공지사항
최근에 올라온 글
- Total
- 817,020
- Today
- 1
- Yesterday
- 18
링크
TAG
- IE6
- adobe
- html5
- 아이폰
- 액티브x
- 모바일
- ie
- 애플
- 고양이
- 안드로이드
- 2mb
- 도쿄
- 쥐새끼
- 웹브라우저
- css
- 아이패드
- 소프트웨어
- 네이버
- 구글
- 코스트코
- IOS
- 트위터
- 일본
- 스마트폰
- 인터넷 익스플로러
- IE8
- 네이트온
- 웹표준
- 오크우드
- 일본여행