入れ子をrelative（相対配置）とabsolute（絶対配置）にする違い

基本形

先ずboxの中にboxを入れただけのレイアウトを用意しました。

boxBは文字列"boxA"の下に配置されていますが、文字列"boxA"がなければ赤いボーダー線の内側左上にピッタリと配置します。

<div id="boxA">
  <p>boxA</p>

  <div id="boxB">
    <p>boxB</p>
  </div>
</div>

#boxA	{
  border: 10px solid pink;
  width: 250px;
  height: 200px;
}

#boxB	{
  border: 10px solid lightblue;
  width: 160px;
  height: 100px;
}

補足

画像は見た目の体裁のため、下記の通りCSSで各box内の文のmarginを消しています。実際ご利用の際はこれは不要です。

div[id^=box] p	{
  margin: 0;
}

relative(相対配置) + relative(相対配置)

HTMLはそのままで、CCSのboxAとboxBを共にrelative(相対配置)にしてみます。

#boxA	{
  border: 10px solid pink;
  width: 250px;
  height: 200px;
  position: relative;
}

#boxB	{
  border: 10px solid lightblue;
  width: 160px;
  height: 100px;
  position: relative;
  top: 50px;
  left: 50px;
}

5,12

boxAとboxB共にrelative（相対配置）を指定します。

13

上下方向です。

14

左右方向です。

boxBは先ほどの本来の位置（文字列"boxA"の下）から下に50px、右に50px移動しました。

relative(相対配置) + absolute(絶対配置)

次に、CSSのboxAはそのままrelative(相対配置)で、boxBをabsolute(絶対配置)にしてみます。

#boxB	{
  border: 10px solid lightblue;
  width: 160px;
  height: 100px;
  position: absolute;
  top: 50px;
  left: 50px;
}

boxBは文字列"boxA"の下からではなく、boxAの赤線から移動しました。

relative + relative で外側要素の内容変更

上記は移動の基点が違うだけでどちらも一見さほどの差はないようにも見えます。そこで変更を想定してboxA内の内容を変えてみます。

HTMLでboxA内の文字列"boxA"を増やし、CSSのboxBをrelative(相対配置)に戻します。

<div id="boxA">
  <p>boxA</p><p>boxA</p><p>boxA</p>

  <div id="boxB">
    <p>boxB</p>
  </div>
</div>

.boxB	{
  border: 10px solid lightblue;
  width: 160px;
  height: 100px;
  position: relative;
  top: 50px;
  left: 50px;
}

relativeは本来の位置（最後の"boxA"の文字列）から移動なので、boxAの内容が増えたことによってboxBが押し出されました。

HTMLは入れ子なのに、見た目入れ子ではなくなっています。

relative + absolute で外側要素の内容変更

HTMLは上記のboxA内の文字列"boxA"を増やした状態のままで、CSSでboxBを再びabsolute(絶対配置)にしてみます。

<div id="boxA">
  <p>boxA</p><p>boxA</p><p>boxA</p>

  <div id="boxB">
    <p>boxB</p>
  </div>
</div>

#boxB	{
  border: 10px solid blue;
  width: 160px;
  height: 100px;
  position: absolute;
  top: 50px;
  left: 50px;
}

boxAの内容を変えてもboxBの位置は変わりません。boxAの赤線からはそのままです。

topやleftの値を大きくすると、boxAの内容に関係なくはみ出ます。

relative(相対配置)とabsolute(絶対配置)の違いのまとめ

relative(相対配置)

• 通常位置からの移動。
• 位置は親の要素の内容に影響される。

absolute(絶対配置)

• 親要素（ない場合はウィンドウ）からの移動。
• 位置は親の要素の内容に影響されない。

となりました。

ちなみに、いずれも親要素がstatic（指定なしデフォルト）ではtopなどの位置指定は無効です。