【CSSの基本】要素を absolute と relative で配置するときの基本を考える
absolute と relative の違いを考える
CSS で要素の位置（Position）を指定する時に設定する「absolute」と「relative」 の使い方の違いを考えてみます。
＜今回のサンプル＞
div で作成した枠の中に、同じく div で作成した緑色のボックス（div要素）を配置していた状態。枠の div が親要素で 緑色のボックスの div が子要素になっています。
～ Html ソース ～
<div class="hako">
<div id="a1"> </div>
</div>
Position を absolute にするとどうなるのか？
Position に absolute を指定すると、ブラウザの表示領域の一番左上を基準にして要素を配置することができます。
① まず、Position に absolute に指定し枠と緑色のボックスを表示してみましょう。要素の位置を具体的に指定する top , bottm , left , right は空欄になっています。
枠が小さくなり緑色のボックスを囲まなくなりました。これにより Position を absolute にすることで、周りを囲んでいた枠と緑色のボックスの親子関係が少し変化するということがわかります。
② 次に、Position は absolute はそのままにして、top に「0」、left に「0」を指定するとどうなるでしょう？
今度は、緑色のボックスが枠があった場所から離れて、ブラウザの表示領域の一番左上（top = 0 , left = 0)の位置に移動しました。これで、Position を absolute にしても、top、bottm、left、right で位置を指定しない限り、自分が今いる場所から離れることはないということがわかりました。
Position を relative にするとどうなるのか？
要素を現在配置されている場所を基準にして配置する場合は「Position」に「relative」を指定てみます。
① まずは、「Position」に「relative」を指定してみます。※left , right , top , bottm は指定なしの空欄です。
absolute の時のように、枠と緑色のボックスの親子関係は崩れていないようですね。
② 次に、left に 50px、top に 50px を指定してみます。
緑色のボックスが、もともと自分が配置されていた場所を基準に上から 50px 左から 50px 移動し枠から飛び出しました。しかし、囲んでいた枠は absolute の場合とは違って中に緑色のボックスがあった時と同じ高さを保っています。
まとめ
・absolute はブラウザの表示領域の左上が基準位置（0 , 0）になる
・relative はその要素が配置された場所が基準位置（0 , 0）になる
・absolute も relative も、具体的な位置（left , right , top , bottom） を指定しなければ要素はその場から動かない。
END
