CSS position:fixedと相対位置

| コメント(0) | トラックバック(0)
IE6では効かないので、expressionを使ってIE6でもなんとか実現できるし、
IE7のシェアも上がってきていることなので、fixed使ってもいいんじゃね?ってことで、いろいろやっていると配置位置の件で気になることが出てきたのでいくつか整理のためにもメモ。

そもそもposition:fixedというのウィンドウの絶対位置として場所をしてしている。つまり
#hoge{
    position:fixed;
    top:100px;
    left:100px;
}
とすると、画面表示部分のtopから100px,左から100pxの位置に配置される。これはすでに認知。

さてでは、中央寄せのコンテンツの場合、どうすればいいの?ってことになる。
position:absoluteの感覚でやっていけば、親ボックスをrelativeにしたら相対位置になんじゃね?って感じになる。つまり
<div id="parent">
     <div id="child">
           hogehogehogeho
     </div>
</div>
ってソースのとき、absoluteだと
#parent{
     position:relative;
     width:800px;
     margin:10px auto;
}
#child{
    position:absolute;
    top:100px;
    left:100px;
}
とすれば、#parentのボックスの中で相対位置としてtop:100px,left:100pxで配置される。
しかし、これと同じように考えて、fixedを
#child{
    position:fixed;
    top:100px;
    left:100px;
}
と指定してしまうと、fixedは表示部分の絶対値としての配置になるので、普通に、左上からtop:100px,left:100pxという結果になる。(初めの#hogeと同じ)

でも中央寄せのときにも位置を固定したいときどうすれば?ということになるのだが、やり方としては、位置の指定をmarginでやるとうまくいく。
つまり、
#child{
   position:fixed;
   top:100px; /*トップからは絶対値と同じなのでそのまま*/
   margin-left:100px;
}

こうすれば、とりあえず問題ない。
とにかく、fixedでは相対位置の考えを持っていないので、相対位置を意味するものを使わないとうまくいかない。ということのようだ。


間違っていたらご指摘お願いします。
また何か調べたら書き込みます。

トラックバック(0)

トラックバックURL: http://sevenstyleweb.com/mt5/mt-tb.cgi/304

コメントする

    follow me on Twitter

    このブログ記事について

    このページは、adminが2009年4月10日 11:55に書いたブログ記事です。

    ひとつ前のブログ記事は「やっぱり強いのか?あのメディア」です。

    次のブログ記事は「扁桃腺」です。

    最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。