今更ですが、Positionタグについてです。
まずは、軽くググっていただきたいのですが、だいたいこんな感じで解説されていると思います。
static
特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されません。これが初期値です。
relative
相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。
absolute
絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。
fixed
絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。
relativeと
absoluteとの違いに関しては
ココに分かり易く解説されています。
と、まあ実際にやってみないとよくわからないので検証してみました。
まず、下記の図のようにBOXを3つ作成しました。
黄BOXを親ボックスとし、その中に、
青BOX、
茶BOXを収納しました。Pojitionはrelativです。
コードはこんな感じ
<div id="oya" style="position:relative; left:0px; top:0px;width:500px; height:500px;background:#FFFACD; border:1px solid;">
<div id="ko1" style=" position:relative; left:0px; top:0px;width:200px; height:200px; background:#200ACD; border:3px solid;"></div>
<div id="ko2" style=" position:relative; left:0px; top:0px;width:100px; height:100px; background:#97492D;border:3px solid;"></div>
</div>
id=『oyaが
黄BOX』『ko1が
青BOX』 『ko2が
茶BOX』 です。
黄BOXのrelativにleft:200px;top:100px;を加えます。
そうすると、親BOXの中に入っている、子BOXも連動して移動します。
青BOXの高さを変えると、茶BOXも連動して動きます。
青BOXのrelativにtop:100px;を加えると、
青BOXのみが移動して、
茶BOXと重なってしまいました。位置関係をキープするには、
茶BOXのrelativにもtop:100px;を加えます。
さらに茶BOXのrelativをtop:150px;にして下げてみます。
この状態で、
青BOXの高さを変えてみたら、位置関係をキープしたまま大きさが変わりました。
最後にセンター配置ですが、
黄BOXに対し、
青BOXをセンターに配置するには、Left:50%とします。
ところがこれだとBOXの左側がセンターにきてしまします。従ってBOXの幅/2をマイナスでマージンします。
width:200pxなので、margin-left:-100px;を青BOXに加えます。
これでセンター配置となりました。
更に、<center>タグや
<div align="center">で囲むことで同様の効果が得られます。
おしまい