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

|

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

[追記ここまで]

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」で指定します。

レイアウトに関する記事(29)

参考サイト

お勧めCSS教本

Powered by Movable Type 4.21-ja

最近のブログ記事