THE HAM MEDIA BLOG

CSSのpositionのまとめ

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
fixed
position
CSS

positionのまとめ

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

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

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

positionプロパティ

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

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

■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>

↓プレビュー

position:static
top:10px;left:10px;

position:relative
top:50px;left:300px;

position:absolute
top:150px;left:100px;

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

ちょっと説明

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

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

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

position

少し補足(position:relative)

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

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

position:relative
top:50px;left:300px;

ダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキスト

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

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

少し補足(position:absolute)

続いてposition:absolute

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

position:absolute
top:60px;left:100px;

ダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキスト

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

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

■height:200pxをつけた

position:absolute
top:60px;left:100px;

ダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキスト

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はもう少しいろいろ実験したいと思います。

この記事へのコメント
こんにちわ
本エントリのposition:fixedについてすこし教えていただきたいのですがよろしいでしょうか。

この手法を使うと IE6 においては 全てのposition:absolute 要素が position:fixed として表示されてしまいます。

で、純粋に absolute として表示したい要素は親要素に relative を持たせればいいかなと思うのですが、今度はその relative 要素が固定表示されてしまいます。(IE6のバグのようです)

なにか解決方法をご存知ないでしょうか。
Posted by cyokodog at 2008年12月04日
>cyokodogさん
そうなんですよね、この方法を使う場合は、
全てのposition:absolute 要素が position:fixedになってしまいます。
同じようにpositionを使っての回避方法がわからないのですが、
固定させたくない場合はpositionを使わないで、floatやmarginやpaddingを使って位置を決めたほうがいいと思われます。
Posted by ハム at 2008年12月04日
>固定させたくない場合はpositionを使わないで、floatやmarginやpaddingを使って位置を決めたほうがいいと思われます。

う〜ん、やはりそういうことですか。。

こちらの手法を応用して諸問題を解決すべくいろいろ抗ってみました。

よろしければ見てやってください↓
http://d.hatena.ne.jp/cyokodog/20081204/PositionFixed03
Posted by cyokodog at 2008年12月05日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

position:fixedのright , bottomをIE6に対応させる
Excerpt: 以前CSS : positionの「absolute」「relative」「fixed」のリファレンスというエントリーをしたんですが、この時はIE6にright , bottomへの対応の仕方につい..
Weblog: CSS Lecture
Tracked: 2008-12-08 11:56

shadowbox.jsをIE6に
Excerpt: shadowbox.jsってのをさわってみてて、IE6でうまくいかないなぁ、と。 position:fixed の問題らしい。 shadowbox.jsをIE6に対応させる - SC..
Weblog: mersy's lab
Tracked: 2008-12-17 20:26

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。