IE 덕분에 작업 시간이 배로 늘어나는 느낌은 지울 수가 없습니다. 그것도 화면 퍼즐 맞추는 시간에 많은 시간을 소모하게 되는게 씁쓸합니다. IE7이 역사속으로 사라지기까지는 몇 년이 더 걸리겠지만 그 뒤엔 또 새로운 IE가 바통을 받아들겠지 ㅜ

IE7에는 많은 버그가 있지만 그 중에 z-index 버그와 해결방법을 소개합니다.

IE7은 이상하게도 position:relative 속성을 가지고 있는 엘리먼트는 z-index를 무참히 0으로 만들어 버립니다. 이 말은 곧 z-index가 먹히지 않는다는 말입니다.

크롬에서 작업을 마치고 IE로 테스트를 하는 순간 멘붕이 오는 요소 중 하나이기도 합니다

자, 여기서 우리는 IE7의 버그를 버그로 해결할 수 있습니다. 이열치열이 아닌 이버그치버그랄까..

<div>
   <div style="position:relative; z-index:9999;">
     아래 이미지가 날 가려버림 ㅜㅜ
   </div>
</div>
<img src="나는 이미지다" />

뭐 이미지는 없어서 대충 코드로 설명합니다. 위 상황은 “아래 이미지가 날 가려버림 ㅜㅜ” 에 속한 div를 아래 “나는 이미지다” 녀석이 z-index를 무시하고 덮어버리는 상황입니다.

대표적으로 네비게시션 메뉴의 서브 메뉴가 나타나는 롤오버 메뉴를 메인 이미지가 먹어버리는 경우를 볼수 있습니다. 이 경우 부모 엘리먼트의 z-index를 자식보다 높게 주면 해결되는 IE7의 또다른 버그가 있습니다. 이 버그로 해결할 수 있습니다.

<div style="position:relative; z-index:10000;">
   <div style="position:relative; z-index:9999;">
     아래 이미지가 날 가려버림 ㅜㅜ
   </div>
</div>
<img src="나는 이미지다" />

부모 div에 position:relative와 z-index를 주었습니다. 자식 엘리먼트의 z-index보다 높게 말이죠. 이런 방법을 쓰면 해결이 되는 이유는 저도 모릅니다.

버그니깐요.. –;