JavaScript & jQuery & CSS & HTML の達人

JavaScript と jQuery と CSS と HTML の使い方がわかるブログ

要素を absolute と relative で配置するときの基本

CSS で要素の位置(Position)を指定する時に設定する「absolute」と「relative」 の使い方の違いを考えてみましょう。

 

<今回のサンプル>
div で作成した枠の中に、同じく div で作成した緑色のボックス(div要素)を配置していた状態。枠の div が親要素で 緑色のボックスの div が子要素になっている。 

 

<Html ソース>

<div class="hako">
<div id="a1"> </div>
</div> 

Position を absolute にするとどうなるのか?

Position に「absolute」を指定すると、ブラウザの表示領域の一番左上を基準にして要素を配置することができる。

 

1.まず、Position に absolute に指定し枠と緑色のボックスを表示してみよう。要素の位置を具体的に指定する top , bottm , left , right は空欄になっている。

 

枠が小さくなり緑色のボックスを囲まなくなった。これにより Position を absolute にすることで、周りを囲んでいた枠と緑色のボックスの親子関係が少し変化するということがわかる。

 

2.次に、Position は absolute はそのままにして、top に「0」、left に「0」を指定するとどうなるだろう?

 

今度は、緑色のボックスが枠があった場所から離れて、ブラウザの表示領域の一番左上(top = 0 , left = 0)の位置に移動した。これで、Position を absolute にしても、詳しい位置を指定しない限り、自分が今いる場所から離れることはないということがわかった。

Position を relative にするとどうなるのか?

要素を現在配置されている場所を基準にして配置する場合は「Position」に「relative」を指定する。

 

1.まずは、「Position」に「relative」を指定してみよう。※left , right , top , bottm は指定なしの空欄。

 

absolute の時のように、枠と緑色のボックスの親子関係は崩れていないようだ。 

 

2.次に、left に 50px、top に 50px を指定してみよう。 

 

緑色のボックスが、自分が配置されていた場所を基準に上から 50px 左から 50px 移動し枠から飛び出した。そして、囲んでいた枠は absolute とは違って中に緑色のボックスがあった時と同じ高さを保っている。 

 

まとめ

・absolute はブラウザの表示領域の左上が基準(0 , 0)になる

・relative はその要素が配置された場所が基準(0 , 0)になる

・absolute も relative も、具体的な位置(left , right , top , bottom) を指定しなければ要素はその場から動かない

 

END