positionのレンダリング

static (通常配置)

div.eg1 {position:static; border:solid 8px #9cf;}
div.eg2 {position:static; border:solid 8px #cc6;}

通常の配置です(初期値)。ルート要素(html)以外で絶対配置か固定配置がなされていない要素の場合、最も近い祖先ブロック要素の内容領域が包含ブロックとなります。

relative (相対配置)

相対配置。後に続くボックスは通常配置になります。ルート要素(html)以外で絶対配置か固定配置がなされていない要素の場合、最も近い祖先ブロック要素の内容領域が包含ブロックとなります。

absolute (絶対配置)

絶対配置。包含ブロックの内辺からの距離を指定して配置します。この値を指定した絶対配置のボックスは、通常の配置から独立しているため、ほかの要素の配置に影響を与えません。

絶対配置の要素の場合、positionプロパティの値がstatic以外である最も近い祖先要素が包含ブロックとなります。
  1. 該当する祖先要素がブロック要素である場合は、そのパディング領域が包含ブロックとなります。
  2. 該当する祖先要素がインライン要素である場合は内容領域が包含ブロックとなります。
     (文字方向が左→右の場合、左上が座標0の点になります。右→左の場合、右上が基点となります)
該当する祖先要素が存在しない場合、ルート要素(html)の内容領域が包含ブロックとなります。

fixed (固定配置)

固定配置の要素の場合、表示領域(ウィンドウやフレーム、ページなど)が包含ブロックとなります。ie6までは未対応です。