CSSデザインノートでタグ「fixed」が付けられているもの

以前、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;
}

参考サイト

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

最近のブログ記事