制作コラム&お知らせ

CSS positionプロパティ(配置)親要素を起点にfixedさせる

2013/07/15

cssでのpositionプロパティ。よくお世話になります。

これ。

static
これが初期値。特に配置方法の指定なし。まぁ、ほとんど指定すことは無い。
いまだかつて使ったことが無い。

relative
相対位置。ここを基準位置とする場合に指定する。

absolute
絶対位置への配置。親要素(ボックス)にpositionプロパティのstatic以外が指定されている場合に、親要素(ボックス)の左上が基準位置となる。親要素(ボックス)にstatic以外の値が指定されていない場合にブラウザウィンドウの左上が基準位置となる。なので、通常absoluteを使う場合はその上のボックスにrelativeを指定することがほとんど。

fixed
絶対位置への配置で位置が固定されたまま。通常は親要素(ボックス)の指定を無視してブラウザウィンドウの左上が基準位置となると、、、思い込んでいたが・・・

なんと、親要素(ボックス)の左上を基準に位置固定する方法があった。

知らなかった・・・今まではjQueryなどを利用したりジャバスクリプトをこねくり回して固定配置したり、それでも思うようにいかなかったのだが。

親要素(ボックス)にrelative又はabsoluteを指定し、位置を決め、「position: fixed ;」で指定した要素にはleft値を指定しない。これで親要素(ボックス)を基準とした位置固定が出来上がる。

これ、必要に迫られて3時間かけて偶然発見!誰でも知っていることなのでしょうけれど、自分で発見IE7~IE10まで動作確認した喜びは隠せないのでありました。。。

IE6はfixed自体に対応していないので、_display: none ですが、もうIE6、ないしIE7は良いんじゃないのかな?

デザイン事務所|エイビッツは個人事業&SOHOネットワークによる運営をしております。

Copyright © 2011-2018 Aveit. All rights reserved. — WebSite by Aveit.