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

基本形

先ずboxを3段重ねただけのレイアウトを用意しました。

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

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

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

#boxA	{
  border: 10px solid pink;
  width: 160px;
  height: 100px;
}

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

#boxC	{
  border: 10px solid lightgreen;
  width: 160px;
  height: 100px;
}

補足

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

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

relative(相対配置)

中央のboxBをrelative(相対配置)で移動してみます。

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

boxBは本来の位置から下に50px、右に100px移動しました。その下の要素boxCは元の位置のままです。

absolute(絶対配置)

次に、中央のboxBをabsolute(絶対配置)で移動してみます。

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

boxBはウインドウの左上から下に300px、右に250px移動しました。

その下の要素boxCが、boxBがないかのようにboxAのすぐ下にきました。

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

relative(相対配置)

• 通常位置からの移動。
• 下の要素は詰まらない。

absolute(絶対配置)

• 親要素（ない場合はウィンドウ）からの移動。
• 下の要素は詰まる。

となりました。