[2] > [[CSS 2.1]] では、[[箱]]の[[位置]]や[[大きさ]]の多くは[DFN[[RUBYB[包含ブロック]@en[containing block]]]]と呼ばれる[[矩形]]の[[箱]]の[[辺]]に対して計算します。通常、生成された[[箱]]は[[子孫]]の[[箱]]の[[包含ブロック]]として働きます。これを、[[箱]]がその[[子孫]]の[[包含ブロック]]を[DFN[[RUBY[確立][かくりつ]@en[establish]]]]するといいます。[Q[[[箱]]の[[包含ブロック]]]]という言葉は、[Q[その[[箱]]が存在する[[包含ブロック]]]]を意味します (その[[箱]]が生成する[[包含ブロック]]ではありません)。 > 各[[箱]]はその[[包含ブロック]]に対しての[[位置]]が与えられますが、[[包含ブロック]]によってその[[位置]]が制限されるわけではありません。[[溢れ]]ることがあります。 [SRC@en[[[CSS 2.1]] 9.1.2]] * 仕様書 -[1] [[CSS 2.1]] -- [CSECTION@en[9.1.2 Containing blocks]] --[CSECTION@en[10.1 Definition of "containing block"]] * 定義 [15] [[包含ブロック]]は次の通り定められています。 [SRC@en[[[CSS 2.1]] 10.1]] - [[根要素]]の属する[[包含ブロック]]は[[初期包含ブロック]]です。 - それ以外の[[要素]]は、 -- [CODE(CSS)@en[[[position]]]] が [CODE(CSS)@en[[[relative]]]] や [CODE(CSS)@en[[[static]]]] の場合、[[包含ブロック]]は[[ブロック水準箱]]、 [[表こま箱]]、[[行内ブロック箱]]のいずれか直近の[[祖先]]の[[内容辺]]により形成されます。 -- [CODE(CSS)@en[[[position]]]] が [CODE(CSS)@en[[[fixed]]]] の場合、 --- [[連続媒体]]の場合、[[包含ブロック]]は [[viewport]] です。 --- [[頁媒体]]の場合、[[包含ブロック]]は[[頁領域]]です。 -- [CODE(CSS)@en[[[position]]]] が [CODE(CSS)@en[[[absolute]]]] の場合、 [CODE(CSS)@en[[[position]]]] が [CODE(CSS)@en[[[absolute]]]]、 [CODE(CSS)@en[[[relative]]]]、[CODE(CSS)@en[[[fixed]]]] のいずれかである直近の[[祖先]]です。 --- [[祖先]]が[[行内水準]]の場合、[[包含ブロック]]はその [CODE(CSS)@en[[[direction]]]] [[特性]]に依存し、 ---- [CODE(CSS)@en[[[ltr]]]] の場合、[[包含ブロック]]の[[上辺]]・[[左辺]]はその[[祖先]]が生成した最初の[[箱]]、[[下辺]]・[[右辺]]は最後の[[箱]]の[[padding辺]]です。 ---- [CODE(CSS)@en[[[rtl]]]] の場合、[[包含ブロック]]の[[上辺]]・[[右辺]]はその[[祖先]]が生成した最初の[[箱]]、[[下辺]]・[[左辺]]は最後の[[箱]]の[[padding辺]]です。 ---- なお、[[包含ブロック]]の[[幅]]が[[負]]になることもあります。 --- [[祖先]]がそれ以外の場合、[[包含ブロック]]はその[[祖先]]の [[padding辺]]です。 --- そのような[[祖先]]が存在しない場合、[[包含ブロック]]は[[初期包含ブロック]]です。 - [4] ほとんどの[[ブロック水準要素]]が生成する[[主要ブロック箱]]は、その[[子孫]]の[[箱]]や[[生成内容]]の[[包含ブロック]]となります。 [SRC@en[[[CSS 2.1]] 9.2.1]] -[11] [[絶対配置]]される[[箱]]は新しい[[包含ブロック]]を[[確立]]します。 [SRC@en[[[CSS 2.1]] 9.6]] * 包含ブロックに対する相対指定 :[3] [CODE(CSS)@en[[[]]]], [CODE(CSS)@en[[[]]]] の値 [CODE(CSS)@en[[[]]]]: [[包含ブロック]]の''[[幅]]'' [WEAK[([CODE(CSS)@en[[[margin-top]]]], [CODE(CSS)@en[[[padding-bottom]]]] でも。)]] に対する値です。ただし、[[包含ブロック]]の幅がその[[要素]]自身に依存する場合の[[配置]]は未定義です。 [SRC@en[[[CSS 2.1]] 8.3, 8.4]] :[5] [[絶対配置]]:[[絶対配置モデル]]ではその[[要素]]の[[箱]]の位置が[[包含ブロック]]に対して定められます。 [SRC@en[[[CSS 2.1]] 9.3, 9.3.1, 9.7]] [CODE(CSS)@en[[[]]]] は[[包含ブロック]]の[[高さ]] [WEAK[([CODE(CSS)@en[[[top]]]], [CODE(CSS)@en[[[bottom]]]])]] や[[幅]] [WEAK[([CODE(CSS)@en[[[right]]]], [CODE(CSS)@en[[[left]]]])]] に対する値です。 [SRC@en[[[CSS 2.1]] 9.3.2]] [CODE(CSS)@en[[[top]]]] などの[[包含ブロック]]が[[ブロック水準要素]]に由来する場合、 [[padding辺]]からの距離とみなされます。 [SRC@en[[[CSS 2.1]] 9.3.2 Note]] * 包含ブロックに対する位置決定 -[6] [[ブロック書式付け文脈]]では、[[箱]]は[[包含ブロック]]の[RUBYB[先頭]@en[top]]から順に垂直方向に配置されます。 [[箱]]の[[左外辺]]は[[包含ブロック]]の[[左辺]]に揃えて配置されます。 ([[rtl]] なら[[右外辺]]、[[右辺]]。) [SRC@en[[[CSS 2.1]] 9.4.1]] -[7] [[行内書式付け文脈]]では、[[箱]]は[[包含ブロック]]の[RUBYB[先頭]@en[top]]から順に水平方向に配置されます。 (この[[箱]]が配置される矩形領域を[[行箱]]といいます。) [SRC@en[[[CSS 2.1]] 9.4.2]] -[8] [[行箱]]の[[幅]]は[[包含ブロック]]と丁度[[内接]]するように決まります。 ただし[[浮動]]の存在により縮まることがあります。 [SRC@en[[[CSS 2.1]] 9.4.2]] -[9] [[相対配置]]で [CODE(CSS)@en[[[left]]]] と [CODE(CSS)@en[[[right]]]] の両方が指定されていて矛盾する時 (「[RUBYB[制約が強すぎる]@en[over-constrained]]時」)、どちらが使われるかは [[包含ブロック]]の [CODE(CSS)@en[[[direction]]]] により決まります ([CODE(CSS)@en[[[ltr]]]] なら [CODE(CSS)@en[[[left]]]] が勝ちます)。 [SRC@en[[[CSS 2.1]] 9.4.3]] -[10] [[浮動箱]]は[[包含ブロック]]または他の[[浮動箱]]の[[外辺]]に自らの[[外辺]]が接する位置まで[[左]]または[[右]]に移動されます。 [SRC@en[[[CSS 2.1]] 9.5, 9.5.1]] [[浮動箱]]の[[上外辺]]が[[包含ブロック]]の[[上辺]]より上にいってはなりません。 [SRC@en[[[CSS 2.1]] 9.5.1]] -[14] [[段落埋め込み水準]]は[[包含ブロック]]の [CODE(CSS)@en[[[direction]]]] により決めます。 [SRC@en[[[CSS 2.1]] 9.10]] * 関連 [13] [[スタック付け文脈]]と[[包含ブロック]]は必ずしも一致しません [SRC@en[[[CSS 2.1]] 9.9.1]]。