positionプロパティ

値

次のような値を設定することができます。

• static – 要素の位置を指定しない。初期値。
• relative – 位置の基準要素として指定。子要素の位置を指定するために、親要素に対して指定。
• absolute – 基準要素をもとに、要素の表示位置を指定。
• fixed – ブラウザの表示領域の範囲で、要素の表示位置を指定。ページをスクロールしても要素は位置をキープする。

パターン1

親要素に「relative」、子要素に「absolute」を指定し、子要素の表示位置を指定する例です。

positionプロパティ指定後に、「top」「bottom」「left」「right」プロパティを使って位置を指定します。

CSSコード例

<style type="text/css">
.box1 {
	position: relative;
}
.box1 .element1 {
	position: absolute;
	top: 20px;
	left: 30px;
}
.box1 .element2 {
	position: absolute;
	bottom: 20px;
	right: 50px;
}
.box1 .element3 {
	position: absolute;
	bottom: -70px;
	left: 50%;
}
</style>
<div class="box1">
	<div class="element1">Element1</div>
	<div class="element2">Element2</div>
	<div class="element3">Element3</div>
</div>

表示例：

パターン2

親要素に「relative」、子要素に「fixed」を指定し、子要素を固定表示する例です。「absolute」との違いは、起点が親要素ではなくブラウザの表示領域になる点と、ページをスクロールしても位置を固定して表示できる点です。

CSSコード例

<style type="text/css">
.box2 {
	position: relative;
}
.box2 .element1 {
	position: fixed;
	top: 0px;
	left: 0px;
}
</style>
<div class="box2">
	<div class="element1">Element1</div>
</div>

表示例：

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。