*1 CSS2における初期包含ブロック(initial containing block)とは、親要素を持たない要素をあらわします。ツリー構造におけるルート要素とは、HTML、XHTMLにおいては、html要素(document root element)のことを指します。
*2 通常、
包含ブロックの左上が座標の0の点になります(CSS2仕様書では明文化されていません)。絶対配置において、
包含ブロックがインライン要素の場合、文字方向が左→右のとき、
包含ブロックの左上が座標の0の点になり、右→左のときは右上が基点となります。
/* static 包含ブロック (block) */
div.outer_stat {position:static; border:dotted 8px #9cf; padding:10px;}
div.outer_rela {position:static; border:dotted 8px #cc6; padding:10px;}
div.outer_abso {position:static; border:dotted 8px #9c6; padding:10px;}
div.outer_fixe {position:static; border:dotted 8px #f66; padding:10px;}
staticな包含ブロック(inline)との関係
/* static 包含ブロック (inline) */
span.outer_stat {position:static; border:dotted 2px #9cf; padding:10px;}
span.outer_rela {position:static; border:dotted 2px #cc6; padding:10px;}
span.outer_abso {position:static; border:dotted 2px #9c6; padding:10px;}
span.outer_fixe {position:static; border:dotted 2px #f66; padding:10px;}
relativeな包含ブロック(block)との関係
/* relative 包含ブロック (block) */
div.outer_stat {position:relative; top:30px; left:30px; border:dotted 8px #9cf; padding:10px;}
div.outer_rela {position:relative; top:30px; left:30px; border:dotted 8px #cc6; padding:10px;}
div.outer_abso {position:relative; top:30px; left:30px; border:dotted 8px #9c6; padding:10px;}
div.outer_fixe {position:relative; top:30px; left:30px; border:dotted 8px #f66; padding:10px;}
*3 ie6まではfixedに未対応です。またie7には、fixedにおいて隅のボーダーが隠れてしまうバグがあります。このバグはie8では修正されています。
relativeな包含ブロック(inline)との関係
/* relative 包含ブロック (inline) */
span.outer_stat {position:relative; top:30px; left:30px; border:dotted 2px #9cf; padding:10px;}
span.outer_rela {position:relative; top:30px; left:30px; border:dotted 2px #cc6; padding:10px;}
span.outer_abso {position:relative; top:30px; left:30px; border:dotted 2px #9c6; padding:10px;}
span.outer_fixe {position:relative; top:30px; left:30px; border:dotted 2px #f66; padding:10px;}
*3 ie6まではfixedに未対応です。またie7には、fixedにおいて隅のボーダーが隠れてしまうバグがあります。このバグはie8では修正されています。
*4 CSS2, CSS2.1の仕様書では、staticおよびrelativeの
包含ブロックは、「ルート要素(html)かつ絶対配置、固定配置がなされている要素、および最も近い祖先ブロック要素」とされています。しかしながら、現状ではie7 ie8 ff3 o9 sf4 gc2においてrelativeが指定されているインライン要素が
包含ブロックとなります。
absoluteな包含ブロック(block)との関係
/* absolute 包含ブロック (block) */
div.outer_stat {position:absolute; top:30px; left:30px; border:dotted 8px #9cf; padding:10px;}
div.outer_rela {position:absolute; top:100px; left:30px; border:dotted 8px #cc6; padding:10px;}
div.outer_abso {position:absolute; top:300px; left:30px; border:dotted 8px #9c6; padding:10px;}
div.outer_fixe {position:absolute; top:400px; left:30px; border:dotted 8px #f66; padding:10px;}
absoluteな包含ブロック(inline)との関係
/* absolute 包含ブロック (inline) */
span.outer_stat {position:absolute; top:30px; left:30px; border:dotted 2px #9cf; padding:10px;}
span.outer_rela {position:absolute; top:100px; left:30px; border:dotted 2px #cc6; padding:10px;}
span.outer_abso {position:absolute; top:300px; left:30px; border:dotted 2px #9c6; padding:10px;}
span.outer_fixe {position:absolute; top:400px; left:30px; border:dotted 2px #f66; padding:10px;}
/* fixed 包含ブロック (block) */
div.outer_stat {position:fixed; top:30px; left:30px; border:dotted 8px #9cf; padding:10px;}
div.outer_rela {position:fixed; top:100px; left:30px; border:dotted 8px #cc6; padding:10px;}
div.outer_abso {position:fixed; top:200px; left:30px; border:dotted 8px #9c6; padding:10px;}
div.outer_fixe {position:fixed; top:300px; left:30px; border:dotted 8px #f66; padding:10px;}
/* fixed 包含ブロック (inline) */
span.outer_stat {position:fixed; top:30px; left:30px; border:dotted 2px #9cf; padding:10px;}
span.outer_rela {position:fixed; top:100px; left:30px; border:dotted 2px #cc6; padding:10px;}
span.outer_abso {position:fixed; top:200px; left:30px; border:dotted 2px #9c6; padding:10px;}
span.outer_fixe {position:fixed; top:300px; left:30px; border:dotted 2px #f66; padding:10px;}
