2013/04/30改訂

●positionを使った配置

top、bottom、left、rightで配置を指定するには、positionを同時に用いて配置方法を指定しておく必要がある。
positionを指定しないとデフォルトのstaticとなり、top、bottom、left、rightの値を記述しても適用されない。(本来の位置に配置される)

top:
上辺からどれぐらい下へずらすか
bottom:
下辺からどれぐらい上へずらすか
left:
左辺からどれぐらい右へずらすか
right:
右辺からどれぐらい左へずらすか

absolute; 絶対配置…基準となるボックスを基点として表示位置を計算する配置方法
基準となるボックスは、「親であり、かつposition:relative;が指定されているボックス」。そのようなボックスが無い場合はbodyが基準になる。
bodyとはつまりブラウザの左上(基準点→ブラウザの左上)

position:absoluteで指定されたボックスは、他の要素との関係が切り離され別物(浮いた状態)になる。よって親ボックス以外の他のボックス要素から影響を一切受けない。
position:absoluteには必ず「親」がいる。ここが重要。
ちなみに、上の方にレイアウトするなら「ブラウザウィンドウ」が親で充分。とくに親ボックスを指定しなくて良いから。

relative; 相対配置…本来自分が配置される位置を基点として表示位置を計算する配置方法
本来配置される位置とは、position:staticを指定した場合に表示される位置である

※top と bottom を同時に指定することはできない
※left と right を同時に指定することはできない
※仮に同時に指定しても、bottom よりも top が、left よりも right が優先される