IE6では効かないので、expressionを使ってIE6でもなんとか実現できるし、
IE7のシェアも上がってきていることなので、fixed使ってもいいんじゃね?ってことで、いろいろやっていると配置位置の件で気になることが出てきたのでいくつか整理のためにもメモ。
そもそもposition:fixedというのウィンドウの絶対位置として場所をしてしている。つまり
さてでは、中央寄せのコンテンツの場合、どうすればいいの?ってことになる。
position:absoluteの感覚でやっていけば、親ボックスをrelativeにしたら相対位置になんじゃね?って感じになる。つまり
しかし、これと同じように考えて、fixedを
でも中央寄せのときにも位置を固定したいときどうすれば?ということになるのだが、やり方としては、位置の指定をmarginでやるとうまくいく。
つまり、
こうすれば、とりあえず問題ない。
とにかく、fixedでは相対位置の考えを持っていないので、相対位置を意味するものを使わないとうまくいかない。ということのようだ。
間違っていたらご指摘お願いします。
また何か調べたら書き込みます。
IE7のシェアも上がってきていることなので、fixed使ってもいいんじゃね?ってことで、いろいろやっていると配置位置の件で気になることが出てきたのでいくつか整理のためにもメモ。
そもそもposition:fixedというのウィンドウの絶対位置として場所をしてしている。つまり
#hoge{とすると、画面表示部分のtopから100px,左から100pxの位置に配置される。これはすでに認知。
position:fixed;
top:100px;
left:100px;
}
さてでは、中央寄せのコンテンツの場合、どうすればいいの?ってことになる。
position:absoluteの感覚でやっていけば、親ボックスをrelativeにしたら相対位置になんじゃね?って感じになる。つまり
<div id="parent">ってソースのとき、absoluteだと
<div id="child">
hogehogehogeho
</div>
</div>
#parent{とすれば、#parentのボックスの中で相対位置としてtop:100px,left:100pxで配置される。
position:relative;
width:800px;
margin:10px auto;
}
#child{
position:absolute;
top:100px;
left:100px;
}
しかし、これと同じように考えて、fixedを
#child{と指定してしまうと、fixedは表示部分の絶対値としての配置になるので、普通に、左上からtop:100px,left:100pxという結果になる。(初めの#hogeと同じ)
position:fixed;
top:100px;
left:100px;
}
でも中央寄せのときにも位置を固定したいときどうすれば?ということになるのだが、やり方としては、位置の指定をmarginでやるとうまくいく。
つまり、
#child{
position:fixed;
top:100px; /*トップからは絶対値と同じなのでそのまま*/
margin-left:100px;
}
こうすれば、とりあえず問題ない。
とにかく、fixedでは相対位置の考えを持っていないので、相対位置を意味するものを使わないとうまくいかない。ということのようだ。
間違っていたらご指摘お願いします。
また何か調べたら書き込みます。


コメントする