eyemovic inc.

Culture blog会社の活動・働き方

2011.02.22

css positionについて

先週、久しぶりに39.5度という高熱が出てしまったトクナガです。
高熱にも関わらずインフルエンザではなく、ただの風邪だった為、2日ほどで治りました。よかったよかった。

さて今回のブログは、、、、、なに書っこかな。

ちょうど書こうとした時に同僚から質問があったので、
CSSでの要素の配置についてです。

※時間がないので、サンプルコードやサンプル画像はありません。

配置する為のプロパティは、「position」というものを使います。
種類は、static・relative・absolute・fixedの4つがあります。

まず初期値の「static」これは何も指定しなかった場合と同じなります。

次に「relative」、これは、相対位置の配置が出来るようになります。
主に、absoluteとかの基準として使ったりします。

続いて「absolute」ですが、これは、どこにでも絶対的に配置が可能となります。
親要素にrelativeがあれば、その要素の左上が基準になりますが、何もない場合、
window全体の左上が基準となります。
便利な反面、こちらは、ブラウザによって解釈が違ったりすることもあるので、
多用すると構造等が複雑になり、修正や運用が難しくなってきます。

最後になりましたが、今回質問があった「fixed」ですが、
絶対配置については、absoluteと同じですが、これは、windowに固定となり、
スクロールしても位置が変わることはありません。

ですが、これまたIEという落とし穴があります。
IEでは、こんなに便利なfixedが全く効きません。その為、Javascriptを併用しなくてはなりません。
透過PNGとかの処理とか含めるとかなり面倒いことになったりします。
 

愛媛県松山市でWeb開発一筋15年、700サイト以上の構築実績!

Webサイト制作・システム開発・スマホアプリ開発・組込ソフトウェア開発ならアイムービックにお任せ下さい。