THE HAM MEDIA BLOG

CSSのpositionのプロパティに、fixedというのがある。
これは指定の部分を固定配置にして、画面がスクロールしても、
画面の同じ位置に表示させておくものである。

ところがこのプロパティ、IE6だとうまく固定されない。

CSSの設定の仕方で実現できるようなので、メモエントリー。

positionプロパティ

まずはpositionプロパティを見てみよう。
positionのプロパティ、よく使うのはabsoluteやrelativeで、
他にもstaticとfixedというのがある。

今回の説明は解説サイトを参照します。

■static

特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されません。これが初期値です。
position−スタイルシートリファレンス

■relative

相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。
position−スタイルシートリファレンス

■absolute

絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。
position−スタイルシートリファレンス

■fixed

絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。実際にはブラウザのサポートが遅れているようです。
position−スタイルシートリファレンス

potirionのサンプル(fixed以外)

ちょっとサンプル。
一番外側の二重線のdivにposition:relative;がついているので、
今回の基準はこのブロックの左上隅になります。

サンプルのHTML。一部CSS省略。

<div style="position:static;10px;left:10px;">
    <p>position:static<br />top:10px;left:10px;</p>
</div>
<div style="position:relative;top:50px;left:300px;">
    <p>position:relative<br />top:50px;left:300px;</p>
</div>
<div style="position:absolute;top:130px;left:100px;">
    <p>position:absolute<br />top:150px;left:100px;</p>
</div>

↓プレビュー

fixed以外をサンプルでやってみました。

ちょっと説明

staticはtopもleftもきかずに、position指定なしと同じ。

relativeはstaticの位置、つまり通常表示される位置を基準として、
そこから指定位置に表示される。
このとき、移動前の位置の大きさは確保されたまま。

absoluteは基準としているものがなければ画面の左上からの位置、
親要素にstaticなどが指定してあると、そこを基準とした位置。
このabsoluteはrelativeと違って、
移動前の位置の大きさは確保されない。
floatみたいに浮いているイメージ。
親要素の高さが確保されなくなるので、clearfixなどの指定が必要。

少し補足（position:relative）

先ほどのサンプル同様、二重線の囲いブロックに
position:relativeを設定して、中のサンプルの動きを見ましょう。

relativeはもとの位置にも同じ大きさの領域が確保されたまま。
なので下に続くテキストの上が開いたままになっています。

テキストの位置はブロックが移動する前の位置の
下からになっているのがわかると思います。

それと、先ほどのもそうですが、
周りの二重線の囲いにもposition:relativeをつけているのは、
今回の例ではあまり意味を持たないのですが、
その囲いの中にposition:absoluteがある場合、
囲いを基準になる位置にすることが出来ます。
先ほども書いたように、これをつけないと
画面の左上が基準になってしまいます。

少し補足（position:absolute）

続いてposition:absolute

relativeとは違って、absoluteはもとの位置の領域はきえます。
なので下に続くテキストが上に来てしまいます。

上のサンプルをみたらわかるように、
周りの外枠の高さが確保されなくもなってしまいます。
対処方法としては、heightを指定するなどをする必要があります。

下の例ではheight:200pxがついています。

■height:200pxをつけた

relativeやabsoluteを使うときはCSSを気をつけるように。

position:fixed

実はこれを使ったことなかったのですが、
使いたい場面が出てきたので調べてみた。

ところがこのfixedはIE6でバグがあって使えない。
使うには下記のような設定が必要なようなので
そのCSSを載せておく。

■position:fixedを実現させるCSS

html, body{
    height: 100%;
    overflow: auto;
    margin: 0;
    padding: 0;
}
div#samp{
    position: fixed!important;
    position: absolute;
}

◆ サンプル

div#sampがfixedさせたい部分。
あとはtopやleft、bottomやleftを指定することで位置を決める。

ただし、利用するときは以下のような注意点がある。

■IE6でposition:fixedするときの注意

・後方置換ではfixedが適応されない
　（標準準拠でのレンダリング時にのみ対応）

xml宣言などをしているとこのposition:fixedが適応されません。
使用する場合はHTMLの方でも標準準拠であるようにしておきましょう。

ちなみに、jQueryのプラグイン、たとえばpiroBoxでも
このCSSを使って固定表示している。

CSSを使わずにposition:fixedを実現させる方法も
cyokodogさんが教えてくださいました。

IE6 向け position:fixed + スクロール追尾型の要素固定表示の方法を考えてみた - Cyokodog::Diary

いつも教えていただき、ありがとうございます！

fixedはもう少しいろいろ実験したいと思います。