position
positionプロパティの役割
positionプロパティは、ボックスの配置の方法を指定します。
positionプロパティで配置方法を指定してから、top、right、left、bottomプロパティで位置を指定することで、ボックスの位置を自由に操作できます。
positionプロパティに設定できる値
absolute | ボックスを絶対配置する。 |
fixed | ボックスを絶対配置にしてウィンドウ内に固定する。 |
relative | ボックスを相対配置にする。 |
static | ボックスを通常の位置に配置。初期値。 |
絶対配置とは、その場所に何かが配置されていたとしても、その上に重なるようにして配置することをいいます。
staticは、通常ボックスを配置すれば表示される位置に表示する、ということです。
relativeは、top、left、right、bottomプロパティなどで位置指定すると、通常ボックスを配置すれば表示される位置を基準として、そこからずらした位置に表示します。
positionプロパティの使い方
<div style="position:absolute;top:0px;left:0px;background-color:#FF0000;height:50px;width:50px;"> </div>
上記のサンプルでは、div要素を絶対配置にして、上から0ピクセル、左から0ピクセルの位置に、赤いボックスを表示しています。
絶対配置にすると、ほかにHTML要素が配置されていても、その上に重なるように配置されます。
関連リンク
よく読まれている記事
- 右クリックメニューの表示が遅い【Information】
- 画像の一部にリンクを貼る(クリッカブルマップ【Dreamweaver】
- 一定時間でローテーションする広告【JavaScript】
- Dreamweaver【Dreamweaver】
- クリックした画像を拡大・縮小する【JavaScript】
UpDate:2010-9-27