子要素にabsoluteを指定するとtopは自動で設定されるのですか？

Question

codepenにてpositionについて勉強してます。

以下のように親にrelative、子にabsoluteを設定。

<div class="a">
  aaa
  <div class="b">
    bbb
  </div>
</div>

.a{
  background-color: green;
  width: 100px;
  height: 100px;
  position: relative;
  
}
.b{
  background-color: skyblue;
  width: 100px;
  height: 100px;
  position: absolute;

  left: 100px;
}

親の右隣に並ぶようにleftだけ指定しました。
そうすると子が下位置になりました。

これはなぜでしょうか？何の値が設定されてるのでしょうか？

ちなみに子要素にtop:0;
とすると揃いました。

Answer 1

これはなぜでしょうか？何の値が設定されてるのでしょうか？

position: absoluteだけをかけて位置を指定しない場合、本来表示される位置がそのままになります。

<div class="b">の位置を動かさなかったとすれば、aaaの次の行に来ます。

Comments

[pecchan]

なるほど！aaaの次の行になってるわけですね！
有難う御座います！理解できました！

Answer 2

こんにちは。

topは、初期値（何も指定しない時の値）がautoです。

top: autoの動作は、以下の通りになります。

auto

以下のように指定します。

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

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

つまり、top bottomに何も指定をしない場合は、絶対配置をしなかった時と同じ位置に配置される、ということです。

Answer 3

top, right, bottom, leftの指定がなければ相対位置をとるからでしょう

Answer 4

CSSの仕様としては、top、bottomいずれも初期値が「auto」のようです。
topの仕様：
https://developer.mozilla.org/ja/docs/Web/CSS/top
bottomの仕様：
https://developer.mozilla.org/ja/docs/Web/CSS/bottom

そして、上記のtopの仕様を読むと、

また、 bottom も auto であった場合は、要素は垂直方向には静的要素が配置される場合と同様に配置されます。

とあります。

なので、子要素の上端は、親の要素である「aaa」という文字列の下端に合っているようですね。
（実際、親要素の「aaa」を消すと、子要素の上端は親要素に揃います）