アイコンWeb制作実験

HTML/CSS/jQuery/Fabric.js を試した様子と結果です.

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

イメージ

公開:2015-02-22

更新:

要素配置を指定するCSSのpositionプロパティのキーワード、relative(相対配置)とabsolute(絶対配置)の違いです。boxを3段重ねて真ん中を移動した様子です。

基本形

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

relative(相対配置)とabsolute(絶対配置)の基本形

<div class="boxA">
  <p>boxA</p>
</div>
<div class="boxB">
  <p>boxB</p>
</div>
<div class="boxC">
  <p>boxC</p>
</div>
.boxA	{
  border: 10px solid red;
  width: 160px;
  height: 100px;
}

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

.boxC	{
  border: 10px solid green;
  width: 160px;
  height: 100px;
}

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

relative(相対配置)

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

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

relative(相対配置)で中央のboxを移動

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

absolute(絶対配置)

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

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

absolute(絶対配置)で中央のboxを移動

boxBはウインドウの左上から下に300px、右に250px移動しました。その下の要素boxCが、boxBがないかのようにboxAのすぐ下にきました

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

relative(相対配置)

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

absolute(絶対配置)

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

となりました。