position

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

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

position

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

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

ボックスの配置位置は、topbottomleftrightで指定する。

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

使用例 - サンプル(A) / サンプル(B) / サンプル(C)

サンプル(A)

[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の場合はこの位置

サンプル(B)

[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の場合はこの位置

サンプル(C)

[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の場合はこの位置