2014年2月12日水曜日

Freeway positionタグについて

今更ですが、Positionタグについてです。
まずは、軽くググっていただきたいのですが、だいたいこんな感じで解説されていると思います。
static
特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されません。これが初期値です。
relative
相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。
absolute
絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。
fixed
絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。

relativeabsoluteとの違いに関してはココに分かり易く解説されています。

と、まあ実際にやってみないとよくわからないので検証してみました。
まず、下記の図のように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">で囲むことで同様の効果が得られます。


おしまい

0 件のコメント:

コメントを投稿