positionがabsoluteな要素における、オフセットプロパティ(top)の挙動をコードで確認する

CSSのオフセットプロパティである、top - CSS: カスケーディングスタイルシート | MDNに書かれている挙動がいまいち理解できなかったので、コードを書いて確認してみます。

オフセットプロパティが初期値なら、staticとabsoluteは同じ位置になる
オフセットプロパティを指定した場合は、staticとabsoluteは基本的に違う位置になる
- ただし、paddingと同じ値をオフセットプロパティに指定すれば同じ位置になる

以下で、順番に確認します。

topの初期値はautoです。MDNによると、position: absolute;での挙動は次のように書かれています。

絶対位置指定要素では、要素の位置は bottom プロパティに基づいて決まり、 height: auto は内容物の高さに基づいて決まります。また、 bottom も auto であった場合は、要素は垂直方向には静的要素が配置される場合と同様に配置されます。

このことから、オフセットプロパティが初期値ならposition: static;な要素と同じ位置になるはずです。コードで確認してみます。

次はtopプロパティに値を設定したものを確認します。指定した場合の挙動は、MDNによると次のように書かれています。

position が absolute または fixed に設定されている場合、 top プロパティは要素の上辺と包含ブロックの上辺との間の距離を指定します。

要素の上辺はtopプロパティを設定した要素の上辺なのでわかるとして、包含ブロックはどれになるでしょうか？今回の場合における包含ブロックは、レイアウトと包含ブロック - CSS: カスケーディングスタイルシート | MDNを参考に探してみると、次のものが該当します。

position プロパティが absolute の場合、包含ブロックは position の値が static 以外 (fixed, absolute, relative, sticky) の直近の祖先要素におけるパディングボックスの辺によって構成されます。

このことから、オフセットプロパティを指定した場合はstaticとabsoluteは基本的に違う位置になるが、paddingと同じ値をオフセットプロパティに指定すれば同じになるはずです。コードで確認してみます。