Web制作実験relative(相対配置)とabsolute(絶対配置)の違い
公開：2015-02-22
更新：
要素配置を指定するCSSのpositionプロパティのキーワード、relative(相対配置)とabsolute(絶対配置)の違いです。boxを3段重ねて真ん中を移動した様子です。
基本形
先ずboxを3段重ねただけのレイアウトを用意しました。
<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;
}
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(絶対配置)
- 親要素（ない場合はウィンドウ）からの移動。
- 下の要素は詰まる。
となりました。