positionのおさらい

2015/04/21

positionの指定について解説しているサイトは沢山あるのだが、どれもイマイチ納得できなかったりする。まだちゃんとは分かっていないのだが、自分用メモとして現時点で理解しているところをまとめた。

static: staticはデフォルトなので、通常特に指定することはなく、普通にmargin、width、heightを使って配置をおこなう。
top、left、bottom、rightによる位置の指定はできない。
relative: staticと同様にmarginやwidthなどで配置を決めるが、top、bottom、left、rightを使ってそこから相対値でずらすことができる。
通常、absolute要素の親ボックスとするときに使う。
absolute: top、left、bottom、rightで位置を指定する。
基準位置は（直近の？）static以外で指定された親ボックスの４辺となる。static以外で指定された親ボックスがない場合、ウィンドウ全体が基準位置となる。
fixed: スクロールしても位置が固定されたままとなる。
top、left、bottom、rightを使うとウィンドウ全体が基準位置となる。
親ボックを基準とするときは、maginを使う。親ボックスはstaticであってもかまわない。
（IE6は対応していない）