position

CSSプロパティ「position」の解説とサンプル。

ボックスの配置位置の基準を指定するプロパティ。

positionプロパティで、ボックスを配置する際の基準となる位置を指定することができる。

ボックスの配置位置は、top、bottom、left、rightで指定する。

relative	相対位置で表示。初期値（static）で表示される場合の位置が基準となる。
absolute	絶対位置で表示。親ボックスにstatic以外の値が指定されている場合（初期値のままとなっている場合）は、その左上が基準となる。初期値（static）の場合は、ウインドウの左上が基準となる。
fixed	絶対位置で表示され、スクロールしても表示位置が動かない。
static	初期値。positionプロパティで値が指定されていない場合はstaticとなる。この際、top、bottom、left、rightの指定は反映されない。

[CSSの記述]

.sampleBox {height:50px; border:solid 1px #c00; position:relative; }
.sampleA { position:relative; top:20px; font-weight:bold; color:#f00; }

[HTMLの記述]

<div class="sampleBox">
	<p class="sampleA">テキストテキストテキスト</p>
</div>

[ブラウザ上の表示]

position:relativeの場合はこの位置

[CSSの記述]

.sampleBox {height:50px; border:solid 1px #c00; position:relative; }
.sampleA { position:absolute; top:20px; font-weight:bold; color:#f00; }

[HTMLの記述]

<div class="sampleBox">
	<p class="sampleB">テキストテキストテキスト</p>
</div>

[ブラウザ上の表示]

position:absoluteの場合はこの位置

[CSSの記述]

.sampleBox {height:50px; border:solid 1px #c00; position:relative; }
.sampleC { position:fixed; top:20px; font-weight:bold; color:#f00; }

[HTMLの記述]

<div class="sampleBox">
	<p class="sampleC">テキストテキストテキスト</p>
</div>

[ブラウザ上の表示]

position:fixedの場合はこの位置

CSSレイアウト実践講座カテゴリ