body だとどうなるか

[11] overflow 通常時

[13] html, body 共に overflow: scroll の時 (overflow の項を参照。)

[12] 凡例:

• 明記していないものはその要素自体が基準。
• 括弧内は座標原点 (左上隅)。括弧省略時はその対象物の左上隅が原点。
• scrollTop/scrollLeft は、 viewport のスクロールバーの状態を反映するか否か。
• ※: 画布上の箱 (absolute は含むが、 fixed は含まない。) の border箱をすべて包含する箱。
• ☆: 2表の異なり。
• ¶: top、left に body の border-top-width、 border-left-width を加算。

[10] 注意:

• WinIE の viewport には border箱と 内容箱がある。
• それ以外のブラウザの viewport は原則として内容箱 (スクロールバーを含まない) を指す。
• 画布可視域: 画布のうち、使用されている正の領域。
• Safari の奇癖モードは html と body の箱を viewport にあわせて伸張する (次元を明示していない場合)。
• 拡張 padding箱: WinIE7 の奇癖モードでは body の border が viewport の border になる。body の margin + border + padding の領域は padding のように扱われるので、これを拡張 padding箱と呼ぶ (border に相当する部分は描画されない; margin に相当する部分にも背景色が塗られる)。 html の padding より外側は無視される。

body 外の要素だとどうなるか?

[5] html 要素に appendChild してみた。 https://suika.suikawiki.org/~wakaba/-temp/test/dom/element/cssom/offset/ の offset-*-html-child-*。

[6] offsetParent:

• Firefox3: body
• Opera9、WebKit: null
• WinIE7: null (ただし、 html に appendChild した次のレンダリングの時点で変なエラーが出る。)

奇癖モードの場合や html に background-color を指定した場合でも変わらず。

[7] offsetTop、offsetLeft:

• Firefox3: top や left の値。
• それ以外: 0。

[9] ちなみに getBoundingClientRect なら Firefox3、 Opera9 共正しい値が取れます。

関連

[8] getClientRects, getBoundingClientRect というのもあります。

[14] [cssom-view] Web compatibility of float return values for offsetWidth/Height ( (Boris Zbarsky 著, 2014-07-03 00:21:25 +09:00 版)) http://lists.w3.org/Archives/Public/www-style/2014Jul/0035.html