HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

ポジション

positionプロパティ

要素の表示位置を指定するプロパティです。

  • 初期値

    static

  • 継承

    不可

  • 適用できる要素

    全要素

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

  • 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>

表示例:

absoluteの指定例

パターン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>

表示例:

fixedを指定した例

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

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

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