positionを使ったレイアウト

positionとは

• positionプロパティは、ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定する
• positionプロパティで指定するのは、配置方法（基準位置）のみ

static（静的）

特に配置方法を指定しません。
この値のときには、top、bottom、left、rightは適用されません。
これが初期値です。

• 通常配置
• ブロックレベル要素は垂直方向に順々に配置
• インラインレベル要素は水平方向に順々に配置

position: relative（相対的）

相対位置への配置となります。
positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。

• その要素本来の位置（左上）からの移動距離
• leftやtopいったプロパティを併用することで、通常配置位置から相対的にずらして配置することができます

position: absolute（絶対的）

絶対位置への配置となります。
親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。
親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。

• 包含ブロック（左上）からの移動距離
• 親ボックスのうちで最も近い層のボックスを基点とします

fixed（固定的）

絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。

• 他のボックスには影響されない配置が可能です
• IE6には対応していません

Webデザインの勉強｜講師日和 より引用