IE6でもposition:fixedと同じ動作をさせる(改訂版）

2009年12月29日 10:23 | 個別ページ

以前、IE6でもposition:fixedと同じ動作をさせるというコラムを書きましたが、実際にデザインしているときに不具合に気づきました。

例えば、fixはしたくないけどもposition:absoluteで絶対配置したいボックスが、スクロールすると画面に固定になってしまうのです。当たり前なのですが。

よってIEの場合、スクロールするためのdivボックス（scrollボックス）を用意し、fix表示したいボックスはscrollボックスより外に出すようにしなければなりません。 scrollボックスでスクロールするようにしているので、htmlおよびbodyではスクロールしないようにします。

サンプルページはこちらから

ソースコードは以下のとおりです。

(X)HTMLコード

<div id="scroll">
   <div id="contents">
      <div class="absolute">絶対配置で表示したい要素</div>
   </div><! -- /contents -->
</div><! -- /scroll -->
<div id="fix">固定したい要素</div>

CSSコード

/* IE6用 */
* html ,
* html body {
   height:100%;
   overflow:hidden;
}

* html #scroll {
   position:relative;
   width:100%;
   height:100%;
   overflow-y:auto;
   overflow-x:hidden;
}

/* 共通 */
div#contents {
   position:relative;
}

div#absolute {
   position:absolute;
   top:0;
   right:0;
}

div#fix {
   position:fixed;
   top:100%;
   right:100%;
}

/* IE6用 */
* html div#fix {
   position:absolute;
}