position

Home>CSS>プロパティリファレンス>position

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

positionプロパティの役割

positionプロパティは、ボックスの配置の方法を指定します。

positionプロパティで配置方法を指定してから、toprightleftbottomプロパティで位置を指定することで、ボックスの位置を自由に操作できます。

positionプロパティに設定できる値

absolute ボックスを絶対配置する。
fixed ボックスを絶対配置にしてウィンドウ内に固定する。
relative ボックスを相対配置にする。
static ボックスを通常の位置に配置。初期値。

絶対配置とは、その場所に何かが配置されていたとしても、その上に重なるようにして配置することをいいます。

staticは、通常ボックスを配置すれば表示される位置に表示する、ということです。
relativeは、topleftrightbottomプロパティなどで位置指定すると、通常ボックスを配置すれば表示される位置を基準として、そこからずらした位置に表示します。

positionプロパティの使い方

<div style="position:absolute;top:0px;left:0px;background-color:#FF0000;height:50px;width:50px;">&nbsp;</div>

 

上記のサンプルでは、div要素を絶対配置にして、上から0ピクセル、左から0ピクセルの位置に、赤いボックスを表示しています。

絶対配置にすると、ほかにHTML要素が配置されていても、その上に重なるように配置されます。

関連リンク

よく読まれている記事

UpDate:2010-9-27