1. Qitailang's HP
  2. webtech

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以外で指定された親ボックスの4辺となる。static以外で指定された親ボックスがない場合、ウィンドウ全体が基準位置となる。
fixed
スクロールしても位置が固定されたままとなる。
top、left、bottom、rightを使うとウィンドウ全体が基準位置となる。
親ボックを基準とするときは、maginを使う。親ボックスはstaticであってもかまわない。
(IE6は対応していない)
sample1: staticとabsolute、fixedの関係のサンプル
sample2: relativeとabsolute、fixedの関係のサンプル