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; のサンプルです。