CSS

A "containing block" is the reference box that defines where an element’s position or size starts from.

包含ブロック（containing block）

やさしい説明

CSSの「包含ブロック（containing block）」とは、ある要素が「どこを基準にして位置やサイズを決めるか」を示す「基準の箱（ベースとなる枠）」のことです。

たとえば、position: absolute; などを使って要素の位置を指定する場合、その位置の起点になるのが「包含ブロック」です。

つまり、要素が「どこを基準にして動くのか」を決める大事なルールなんです。

イメージで理解しよう

あなたが地図にシールを貼るとき、どの地図を使うかで位置が変わりますよね。

CSSの包含ブロックも同じで、「どの地図を使うか」＝「どの要素を基準にするか」を決めているイメージです。

具体例で見てみよう

こう書けばOKです：

HTML

<div class="parent">
    <div class="child">子要素</div>
</div>

CSS

.parent {
    position: relative;
    width: 200px;
    height: 200px;
    background: lightgray;
}

.child {
    position: absolute;
    top: 20px;
    left: 30px;
    background: skyblue;
}

この場合、.child は .parent の中で「上から20px・左から30px」の位置に配置されます。

なぜなら .parent が position: relative; を持っているので、.child の「包含ブロック」が .parent になるからです。

もし .parent に position が指定されていなければ、ブラウザ全体（<html>）が基準になります。

ポイントまとめ