IE6でもposition:fixedと同じ動作をさせる

2009年8月28日 22:58 | 個別ページ

[追記：2009/12/29]
デザインによっては動作不良を起こす事がわかりました。改訂版を用意したのでそちらもあわせてご覧ください。

IE6でもposition:fixedと同じ動作をさせる(改訂版） - CSSデザインノート

[追記ここまで]

Webページをスクロールしても、ある要素を固定した位置で表示したいときがあります。例えば、｢ページのトップへの戻り｣のリンクやヘッダーメニューなどです。

固定配置をするためには｢position:fixed;｣を使用します。しかし、IE6ではfixedはサポートされていません。そこでCSSを駆使して、IE6でも擬似的に｢position:fixed;｣と同じ動作するように指定します。

ポイントは、普通スクロールする際、htmlタグのスクロールを使用しているのですが、それを非表示にしてbodyをスクロールさせます。

サンプルページ

(X)HTMLコード

<div id="totop">ページのトップへ戻る</div>
<div id="text"> 
<p>テキストテキスト</p>
<p>テキストテキスト</p>
（略）
<p>テキストテキスト</p>
<p>テキストテキスト</p>
</div>

最低限必要なCSSソースコードです。

CSSコード


#totop {
   position:fixed;
   right:0;
   bottom:0;
}

/* IE6用 */
* html {
   overflow:hidden;
}

* html body {
   height:100%;
   overflow:auto;
   margin:0;
}

* html #totop {
   position:absolute;
   right:16px;
}

注意点は、右の基点が、IE6ではブラウザの右端に対して、Firefoxなどの他のブラウザは、スクロールバーを含まない右端になります。つまり、IE6ではright:0を指定するとスクロールバーと要素が重なってしまいます。rightで位置を指定する場合、上記の例で言うと、IE6では｢* html #totop｣で指定、その他は｢#totop｣で指定します。