positionプロパティの値をabsoluteにした場合

Question

divタグとpタグにpositionプロパティを指定しない時は、pタグは左右20pxずつ隙間をあけて横いっぱいに広がりますが、positionプロパティを指定すると、pタグは横いっぱいに広がらず、文字の部分の背景だけがオレンジになりました。まるで、inline要素のように。

positionプロパティを指定すると、block要素からinline要素に変わったりするものなのですか？

<div class="div">
  <p class="aiu">aiueo</p>
</div>

.div{
  background: silver;
  padding: 20px;
  position: relative;
}
.aiu{
  margin: 0;
  background: orange;
  position: absolute;
  top: 0;
  left: 0;
}

Answer 1

親要素の幅を継承しなくなるため、幅が無い状態で表示されるだけです。
inlineと違い、親要素を超えた幅を持つことが出来ます（折り返さない）。

【position - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/position#Syntax

absolute

要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。直近の配置されている祖先があれば、それに対して相対配置されます。

Answer 2

CSS 2.1 に、幅の計算について書かれています。
絶対配置される非置換要素の場合
https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width
http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visudet.html#abs-non-replaced-width

1. 'width'と'right'が'auto'であり'left'が'auto'でないなら、幅は適合するように縮む。そして'right'について解く。