IE6에서 div가 select에 가려지는 현상 해결법

인터넷 익스플로러6에서 absolute 등으로 부유된 div가 select에 가려지는 현상에 곤욕을 치루는 경우가 많다. IE6은 div보다 select를 우선으로 처리하기 때문인지라 자바스크립트를 사용해 div가 부유될 경우 select를 강제로 숨겨주는 등의 기법이 알려져 있다.

▲ 일반 브라우저에서 정상 출력되는 모습(좌) / IE6에서 select에 가려진 현상(우)

하지만 css만으로도 div가 select에 가려지지 않게 만들 수 있다. 해답은 비어있는 iframe 을 부유된 div와 같은 위치로 넣으면 된다는 것.

위 예제의 코드는 아래와 같다.

<div style="position:relative;">
    <div style="position:absolute; background:#e9e9e9; border:1px solid #000; height:100px; width:100px; padding:10px;">
        내용
    </div>
</div>
<br />
<br />
<select>
    <option>어쩌구 어쩌구 어쩌구 어쩌구</option>
</select>

해결책

여기에 아래와 같이 굵은 글씨로 된 코드처럼 비어있는 iframe을 부유된(absolute) div와 같은 사이즈로 추가하면 된다.

<div style="position:relative;">
    <iframe style="position:absolute; background:#e9e9e9; height:102px; width:102px; padding:10px;"></iframe>
    <div style="position:absolute; background:#e9e9e9; border:1px solid #000; height:100px; width:100px; padding:10px;">
        내용
    </div>
</div>
<br />
<br />
<select>
    <option>어쩌구 어쩌구 어쩌구 어쩌구</option>
</select>

(위 예제에서는 iframe의 높이와 너비에 border를 안 쓰는 대신 2px씩 늘려줬다)

제대로 했다면, 위 화면 처럼 IE6에서도 원하는 결과물을 얻을 수 있을 것이다.

단점과 한계

absolute된 div의 너비는 흔히들 지정하지만, 높이는 유동적인 경우 때문에 지정하지 않는 경우가 많다. 그러나 위 예제에서 사용된 iframe에는 div처럼 내용을 넣을 수 없을 뿐더러 내용을 넣는다 하더라도 높이가 변하지 않는 문제가 있다.

따라서 이 해결책은 높이가 어느정도 제한되어 있는 경우에만 사용하길 추천한다.