基本形

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

<div class="boxA">
<p>boxA</p>
<div class="boxB">
  <p>boxB</p>
</div>
</div>

.boxA	{
  border: 10px solid red;
  width: 250px;
  height: 200px;
}

.boxB	{
  border: 10px solid blue;
  width: 160px;
  height: 100px;
}

（見やすくするためにCSSは上記以外に多少の装飾をしています。）

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

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

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

.boxA	{
  border: 10px solid red;
  width: 250px;
  height: 200px;
  position: relative;
}

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

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

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

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

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

boxBは文字列"boxA"の下からではなくboxAの赤線内側から下に50px、右に50px移動しました。

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

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

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

<div class="boxA">
<p>boxA<br>boxA<br>boxA</p>
<div class="boxB">
  <p>boxB</p>
</div>
</div>

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

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

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

<div class="boxA">
<p>boxA<br>boxA<br>boxA</p>
<div class="boxB">
  <p>boxB</p>
</div>
</div>

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

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

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

relative(相対配置)

• 通常位置からの移動。
• 他の要素に押し出される。

absolute(絶対配置)

• 親要素（ない場合はウィンドウ）からの移動。
• 他の要素に押し出されない。

となりました。