position：要素の位置指定の種類を変更する

初期値 static
適用対象 全ての要素
継承 しない
アニメーション 離散値
対応ブラウザ caniuseで確認

positionプロパティの説明

CSSのpositionプロパティは、要素の位置指定の種類を変更します。通常、文書の中に配置された要素は、親要素のフローに従って配置されますが、このフローから切り離して絶対位置を指定したり、新しいスタッキング・コンテキストを作成することができます。

positionの値をstatic以外にすると、その要素は位置指定の対象となります。位置指定で使用するプロパティは以下の通りです。

  • 上辺からの距離：top
  • 右辺からの距離：right
  • 下辺からの距離：bottom
  • 左辺からの距離：left
  • 重なり合う順序：z-index

positionに指定できる値

static
要素を通常のフローに従って配置します。位置指定を実行するプロパティ、top、right、bottom、left、z-indexの影響を受けません。これが初期値です。
relative
要素を通常のフローに従って配置し、位置指定を実行するプロパティの指定を受け入れます。位置指定の値は、既存の配置位置からの相対的なオフセットを表します。ただし、位置指定によって移動した要素は、他の要素のレイアウトに影響を与えません。ボックスに与えられる領域は、あくまでstaticと同じ位置になります。z-indexの値がauto以外の場合、新しいスタッキング・コンテキストを生成します。
absolute
要素を通常のフローから除外し、位置指定を実行するプロパティの対象とします。ページ内にボックスを配置する領域は確保されず、隣接する要素はこの要素がないものとして配置されます。この値が指定された要素は、positionにstatic以外の値を持つ祖先の相対位置を取ります。最終的な配置位置は、top、right、bottom、left、z-indexの値により決定します。z-indexの値がauto以外の場合、新しいスタッキング・コンテキストを生成します。
fixed
要素を画面上の絶対位置に固定します。厳密には、ビューポートによって定められた初期の包含ブロックに対する相対的な配置です。absoluteの場合は、スクロールに従って包含ブロックと共に移動しますが、fixedは画面に表示された初期位置から動きません。ただし、ソースコード上の祖先に transform、perspective、filterのいずれかが指定され、その値がnone以外だった場合は例外となり、そのれが包含ブロックとして働くようになります。
sticky
要素を通常のフローに従って配置し、スクロールする直近の包含ブロックと共に移動しますが、位置指定の条件に達すると、包含ブロックの端が来るまでその位置に粘着します。この値は、常に新しいスタッキング・コンテキストを生成します。

paddingの使い方とサンプルコード

paddingプロパティの構文は以下の通りです。


/* キーワード値 */
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

/* グローバル値 */
position: inherit;
position: initial;
position: revert;
position: unset;

positionの実例

それでは実際にpositionプロパティの書き方を見ていきましょう。最初の例は、位置指定された要素がどのように配置されるのかを単純に確認する内容です。対象となる要素は、top、right、bottom、leftを使ってオフセット値を定めます。要素が重なる順序を変える場合は、z-indexを追加で指定します。

絶対位置指定のabsoluteを使う場合は、包含ボックスにpositionのstatic以外の値を付与して下さい。これを指定しないと、祖先を遡って相対値の基準となる要素を探します。

以下のコンテナにはresizeが設定されています。対応しているブラウザであればサイズ変更が可能なので、要素の位置がどのように変化するのか確認してみましょう。


<section class="samp_box">
	<div>position 指定なし</div>
	<div id="posi_1">
		position: relative;<br>
		top: 1rem;<br>
		left: 5rem;<br>
	</div>
	<div id="posi_2">
		position: absolute;<br>
		top: 20px;<br>
		right: 20px;<br>
	</div>
	<div id="posi_3">
		position: absolute;<br>
		bottom: 20px;<br>
		left: 20px;<br>
	</div>
	<div id="posi_4">
	position: absolute;<br>
	bottom: 20px;<br>
	right: 20px;<br>
	</div>
</section>


.samp_box {
	position: relative;
	overflow: auto;
	height: 300px;
	padding: 1rem;
	background-color: #eee;
	resize: both;
}
.samp_box > div {
	width: 200px;
	padding: .5rem;
	border: 1px solid #999;
	background-color: #fff;
	font-size: 0.875rem;
}
#posi_1 {
	position: relative;
	top: 1rem;
	left: 5rem;
}
#posi_2 {
	position: absolute;
	top: 20px;
	right: 20px;
}
#posi_3 {
	position: absolute;
	bottom: 20px;
	left: 20px;
}
#posi_4 {
	position: absolute;
	bottom: 20px;
	right: 20px;
}

相対位置指定：relative

relativeは、通常の配置位置の領域を残したまま位置移動だけを行える値です。この機能は、ユーザーのアクションに対して何らかのフィードバックを与えたい時などに有効です。

例えば、リンクされた要素をクリックした時に少しだけ位置を移動させることで、そのアクションが有効であることを明示できます。


<section class="samp_box">
	<div class="flex_box" ontouchstart>
		<div>Item</div>
		<div>Item</div>
		<div>Item</div>
	</div>
</section>


.samp_box {
	overflow: auto;
	padding: 3rem 1rem;
	background-color: #eee;
}
.samp_box > div {
	padding: 1rem;
	background-color: #fff;
	display: flex;
	justify-content: space-evenly;
	gap: 1rem;
}
.flex_box > div {
	width: 20%;
	padding: .5rem;
	background-color: #09f;
	color: #fff;
	text-align: center;
}
.flex_box > div:hover {
	position: relative;
	top: 3px;
	left: 3px;
}
.flex_box > div:active {
	position: relative;
	top: 5px;
	left: 3px;
	background-color: #999;
}

絶対位置指定：absolute

absoluteは、通常のレイアウトとは切り離して要素を自由に配置できる値です。この機能は、要素をレイヤー状に重ねて配置したり、ソースコードの記述順序に関係なくレイアウトしたい場合に有効です。

以下の例は、positionにrelativeの値を持つコンテナに、アイテムを絶対位置で配置しています。このアイテムはコンテナの中で固定されていますが、スクロールは通常どおり反映されます。その結果、コンテナの内部にスクロールが発生した場合、影響を受けるアイテムは初期位置から移動します。


<section class="samp_box">
	<h2>スクロールして下さい</h2>
	<p>Text text text text text text text text. Text text text text text text text text. Text text text text text text text text.</p>
	<p>Text text text text text text text text. Text text text text text text text text. Text text text text text text text text.</p>
	<p>Text text text text text text text text. Text text text text text text text text. Text text text text text text text text.</p>
	<div class="abs_1">Item A</div>
	<div class="abs_2">Item B</div>
</section>
<!-- 同じ内容の繰り返しのため省略 -->


.samp_box {
	position: relative;
	overflow: auto;
	max-height: 200px;
	padding: 0 1rem 1rem;
	background-color: #eee;
}
.samp_box > h2 {
	margin: 1rem 0 0;
	font-size: 1rem;
	text-align: right;
}
.samp_box > p {
	margin: 1rem 0 0;
	padding: 1rem;
	background-color: #fff;
}
.samp_box > div {
	position: absolute;
	padding: .5rem 1rem;
	color: #fff;
}
.abs_1 {
	top: 0;
	left: 0;
	background-color: rgba(255, 0, 153, 0.7);
}
.abs_2 {
	bottom: 0;
	right: 0;
	background-color: rgba(0, 153, 255, 0.7);
}

固定位置指定：fixed

fixedは、画面の特定箇所に要素を固定する値です。厳密にはビューポートの初期ブロックが包含要素となるため、画面全体の端を位置指定の基準とします。この値が指定された要素は、画面をスクロールしてもその場に留まり続けるため、浮いているように見えます。

この機能は、ナビゲーション用のメニューやページ上部へのジャンプボタンに向いています。以下の例は、スクロールするコンテツと固定した要素の見栄えを確認するものです。


<div class="samp_box">
	<main>
		<h1>コンテンツの見出し</h1>
		<p>Text text text text text text. Text text text text text text. Text text text text text text.</p>
		<!-- 同じ内容のため省略 -->
		<h2>コンテンツの見出し</h2>
		<p>Text text text text text text. Text text text text text text. Text text text text text text.</p>
		<!-- 同じ内容のため省略 -->
	</main>
	<nav id="sidebar">
		<h2>Sidebar</h2>
		<ul>
			<li>List Item</li>
			<li>List Item</li>
			<li>List Item</li>
			<li>List Item</li>
			<li>List Item</li>
		</ul>
	</nav>
</div>


.samp_box {
	position: relative;
	overflow: auto;
	padding: 0 1rem 1rem;
	background-color: #eee;
}
.samp_box > main {
	overflow: auto;
	margin: 1rem 0 0 9rem;
	padding: 0 1rem 1rem;
	background-color: #fff;
}
main > h1, h2 {
	margin: 1rem 0 0;
	font-size: 1rem;
	border-bottom: 1px solid #999;
}
main > p {
	margin: 1rem 0 0;
}
nav[id="sidebar"] {
	position: fixed;
	top: 1rem;
	left: 1rem;
	width: 8rem;
	padding: 0 1rem 1rem;
	background-color: #fff;
}
nav[id="sidebar"] > h2 {
	margin: 1rem 0 0;
	font-size: 1rem;
}
nav[id="sidebar"] > ul {
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}
ul > li {
	border-bottom: 1px dotted #999;
}

粘着位置指定：sticky

stickyは、特定の条件を超えるまでは相対位置として扱い、条件を満たした時に絶対位置として扱う値です。この機能は、包含ブロックの範囲のみで作動するため、特定の範囲にスクロールした時に要素を固定し、スクロールが包含ブロックの終端に差し掛かった時に固定を解除する表現に有効です。

以下の例は、セクションの中の見出し要素をコンテンツのスクロールに追随する形で固定し、セクションが終わったらその固定を解除するように記述しています。このような表現は、リストやテーブルなどの一覧性を担保したい場所でも採用されます。

stickyを使用する場合は、top、right、bottom、leftプロパティのいずれかを必ず併記する必要があります。これらを指定しないと、絶対位置に切り替える条件となるしきい値が確定しないため、常に相対位置指定として扱われます。


<main class="samp_box">
	<section>
		<h1>Sticky element</h1>
		<p>Text text text text text text. Text text text text text text. Text text text text text text.</p>
		<p>Text text text text text text. Text text text text text text. Text text text text text text.</p>
		<p>Text text text text text text. Text text text text text text. Text text text text text text.</p>
	</section>
	<section>
		<h1>Sticky element</h1>
		<p>Text text text text text text. Text text text text text text. Text text text text text text.</p>
		<p>Text text text text text text. Text text text text text text. Text text text text text text.</p>
		<p>Text text text text text text. Text text text text text text. Text text text text text text.</p>
	</section>
	<section>
		<h1>Sticky element</h1>
		<p>Text text text text text text. Text text text text text text. Text text text text text text.</p>
		<p>Text text text text text text. Text text text text text text. Text text text text text text.</p>
		<p>Text text text text text text. Text text text text text text. Text text text text text text.</p>
	</section>
</main>


.samp_box {
	padding: 0 1rem 1rem;
	background-color: #eee;
}
.samp_box > section {
	max-width: 360px;
	margin: 1rem auto 0;
	padding: 0 1rem 1rem;
	background-color: #fff;
}
section > h1 {
	position: sticky;
	top: 0;
	margin: 0 -1rem;
	padding: .5rem 1rem;
	background-color: #09f;
	color: #fff;
	font-size: 1rem;
}
section > p {
	margin: 1rem 0 0;
}

positionに関連するCSSプロパティ

要素の表示や配置方法
bottom 位置指定で配置された要素の底辺からの距離を指定する
break-after ボックスの終了時にページやカラムをどのように区切るかを指定する
break-before ボックスの開始前にページやカラムをどのように区切るかを指定する
break-inside ボックスの途中でページやカラムをどのように区切るかを指定する
clear フロート（float）の回り込みを解除する
clip 要素を切り抜いて可視化する範囲を指定する
box-decoration-break 要素の断片が複数の行やページに渡る場合に装飾の表示の仕方を指定する
display 要素の表示形式を指定する
float 要素を右または左へ寄せて配置する
image-orientation 横向きや逆さまに撮影された写真を正しい向きに回転させる
image-rendering 画像を拡大縮小するアルゴリズムを設定する
left 位置指定で配置された要素の左辺からの距離を指定する
object-fit 画像や動画などの置換要素をボックスに収める方法を指定する
object-position ボックスの中に配置されるオブジェクトの位置を指定する
overflow 要素からはみ出した内容の表示方法をまとめて指定する
overflow-wrap インライン要素に対して溢れる単語の折り返し方法を指定する
overflow-x 要素から水平方向にはみ出す内容の表示方法を指定する
overflow-y 要素から垂直方向にはみ出す内容の表示方法を指定する
position 要素の位置指定の種類を変更する
right 位置指定で配置された要素の右辺からの距離を指定する
vertical-align インライン要素や表のセルに対して縦方向の揃える位置を指定する
visibility 要素の領域を残したまま表示・非表示を切り替える
z-index 要素の重なり順序を指定する
© weblan3.com