position absoluteさせたブロック要素の幅が親要素と同じにならないのはなぜ

Question

position:absoluteさせたブロック要素の横幅についてです。

positon:absoluteさせたブロック要素の横幅が、インライン要素のようになることに気付きました。
width:100%を指定することで、親要素と同じ幅を確保できるということは分かりました。

しかし、なぜabsoluteさせることで幅がインライン要素のようになってしまうのか
検索しても見つかりませんでした。

なぜ、このような動作になる理由について知りたいです。

宜しくおねがいします。

https://codepen.io/yumeyamada/pen/yLOdavG

Answer 1

position - CSS: カスケーディングスタイルシート | MDN

absolute

要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。直近の配置されている祖先があれば、それに対して相対配置されます。そうでなければ、初期の包含ブロックに対して相対配置されます。最終的な位置は top, right, bottom, left の値によって決定されます。

分かりにくい表現ですが、明示的にサイズを指定しないと、サイズは広がらないという仕様だと私は解釈しました。

width:100%; または left:0;right:0;とすれば親（直近のposition:relative;を指定した要素）と同じ幅になります。

Comments

[退会済みユーザー]

納得できました。
ご回答ありがとうございました。