WEB技術の辞書・解説・使用例

TOP > CSS >  CSS辞典 > position
position  ブロック要素  配置  重要 

ボックスの配置方法（基準位置）を指定。

このエントリーをはてなブックマークに追加
positionプロパティは、ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定する際に使用します。
配置に関するプロパティ top, bottom, left, right, z-index などは、初期値である、position:static; 以外の値を設定しなければいけません。

パラメーター

static(初期値)
　親ボックスとなるような場合は指定します。
　＊この場合 top、bottom、left、rightなどのプロパティは適用されません。
relative
　相対位置への配置となります。
absolute （ページの絶対位置）
　絶対位置への配置となります。
　親ボックスが static以外の場合・・・親ボックスの左上が基準位置。
　親ボックスが static以外の場合・・・ウィンドウの左上が基準位置。
fixed （画面の絶対位置）
　スクロールしても指定位置に固定表示されます。

サンプルコード


<div style="border:1px solid #ccc;background-color:#f0f0ff;width:150px;">
position:static;
</div>
<div style="border:1px solid #ccc;background-color:#f0f0ff;width:150px;position:relative;top:50px;left:50px;">
position:relative;top:20px;left:50px;
</div>
<div style="border:1px solid #ccc;background-color:#f0f0ff;width:150px;position:absolute;top:70px;left:70px;">
position:absolute;top:70px;left:70px;
</div>
<div style="border:1px solid #ccc;background-color:#f0f0ff;width:150px;position:fixed;top:90px;left:90px;">
これは position:fixed;top:90px;left:90px; のサンプルです。
</div>

position:static;
position:relative;top:20px;left:50px;
position:absolute;top:70px;left:70px;
これは position:fixed;top:90px;left:90px; のサンプルです。