てんぽ: 絶対配置要素の位置の基準

『ザ・ルールズ・オブ・スタイルシート』PDF資料18,19ページのposition:absoluteに関する説明で、絶対配置要素の位置の基準について以下のように書かれているのですが、 これはあまり正確ではない。

position: absolute

• 包含ブロック（左上）からの移動距離
• ただし、ブラウザ実装はbodyからの移動距離

包含ブロック（左上）からの移動距離というのは正しいのですが、 ただし、ブラウザ実装は～という表現から包含ブロックについて誤解があることを読み取れます。

包含ブロックとは単に親要素のことを指すのではありません。CSSの仕様で細かく場合分けして定義された用語で、 絶対配置要素の包含ブロックは「祖先要素のうち最も近い、positionの値がstaticでない要素のパディング辺。該当するボックスがなければ、初期包含ブロック」です。

PDF資料の例では、position: absoluteが指定されたp要素の包含ブロックは、親要素のdiv#contentではなく、初期包含ブロックになります（div#contentのpositionの値はとくに明示されていないので初期値のstaticであると見なす）。 なのでブラウザ実装はbodyからの移動距離というのは仕様的にも正しい（正確には初期包含ブロックがbodyに見えるというだけですが）。

つまり、このような書き方では、「仕様的にはpはdiv#contentを位置の基準にするべきだが、ブラウザ実装はbodyを基準にしてしまっている」と読めるので、 この2項目をただしでつなぐのは不適当というわけです。

p要素の位置の基準をdiv#content（が形成する包含ブロック）にするには、div#contentにposition: relative等を指定する必要があります。

Web標準の教科書は益子 貴寛氏の著作であり、 やはり同様の誤解が見られましたが、『Web標準の教科書』が良書であることに変わりはないと思います（改定版に期待します）。

• 関連：コンテナブロック（包含ブロック）とは
• 関連：Harukiya Archives「連動」