position(ポジション)について

BOXの配置方法を設定するプロパティです。相対的位置か絶対的位置かを指定する。top・right・bottom・leftで距離の調整も可能です。

position(ポジション)の概念図

relativeのブラウザ表示例

■CSS記述
.sample1 { width:300px; height:50px; background-color:#f5f5f5; }

.sample2 { color:#fff; position:relative; background-color:#00f; }

.sample3 { color:#fff; position:relative; top:10px; left:10px; background-color:#f00; }
■XHTML記述
<div class="sample1">

<p>relative<span class="sample3">サンプル</span></p>

</div>

relative(相対)サンプル

absoluteのブラウザ表示例

■CSS記述
.sample1 { width: 300px; height:50px; background-color:#f5f5f5; }

.sample2 { color:#fff; position:relative; background-color:#00f; }

.sample4 { color:#fff; position:absolute; top:10px; left:10px; background-color:#f00; }
■XHTML記述
<div class="sample1">

<p>relative<span class="sample4">サンプル</span></p>

</div>

absoluteサンプル(絶対)

fixedのブラウザ表示例

■CSS記述
.sample1 { width:300px; height:50px; background-color:#f5f5f5; }

.sample2 { color:#fff; position:relative; background-color:#00f; }

.sample5 { color:#fff; position:fixed; top:50px; left:900px; background-color:#f00; }
■XHTML記述
<div class="sample1">

<p>fixed<span class="sample5">fixedのサンプルです</span></p>

</div>

fixed(絶対固定)fixedのサンプルです

position(ポジション)の設定方法

配置設定
position: (値);
上からの位置設定
top: (値);
右からの位置設定
right: (値);
下からの位置設定
bottom: (値);
左からの位置設定
left: (値);

position(ポジション)の値

static
初期値になります。BOXの配置方法を設定しません。staticの時は、top・right・bottom・leftは適用されません。
relative
BOXを相対的に配置します。staticを設定した時に表示される位置が基準位置となります。
absolute
BOXを絶対的に配置します。囲んでいる親BOXの左上が基準位置となります。囲まれていない場合はウィンドウの左上が基準位置となります。
fixed
BOXを固定表示させます。スクロールしても同位置のままです。
top,right,bottom,left
mm , cm , in , pt , pc , em , ex , px , %
※static以外の時に適用されます。