[CSS]IE6에서 레이어 고정시키기 핵. Fixed Layer Hack for IE6

이팁은 나라디자인 ( http://www.naradesign.com ) 블로그에서 가져온 팁입니다.
흔히 "따라다니는 스크롤배너" 라는 팁으로 자바스크립트와 함께 사용되어져 왔었는데, 자바스크립트는 전혀 사용하지 않고 CSS Hack을 사용하여 IE6 에서 position:fixed 상태의 레이어를 구현할 수 있는 팁이라고 할수있습니다.

* { margin:0; padding:0;} /* html, body 사이의 간격을 제거 */
html { _overflow:hidden;} /* 기본 스크롤 제거 */
body { _height:100%; _width:100%; _overflow:auto;} /* 대체 스크롤 생성 */
#content { width:580px; height:1000px; margin:20px; padding:10px; background:#eeeeee;}
#aside { position:fixed; _position:absolute; _z-index:-1; left:650px; top:20px; width:100px; height:300px; padding:10px; background:#dddddd;}

<div id="content">
<h1>Fixed Layer Hack for IE6</h1>
</div>
<div id="aside">
<h2>Example</h2>
</div>

호환되는 브라우저

 

 * Firefox2, Opera9, Safari2, IE6~7 에서 모두 동일하게 position:fixed 형태로 렌더링 합니다.
 * IE5.0~IE5.5 버전의 브라우저에서는 position:absolute 형태로 렌더링 합니다.
 * DTD가 Quirks Mode 상태일 때에는 적용되지 않습니다.

자세한 사항은 나라디자인 (정찬명님) 사이트에서 확인 하시기 바랍니다.