top：位置指定の条件に応じて上からの距離を決定する

topプロパティの説明

topは、位置指定された要素の包含ブロックの上辺からの距離を指定します。これは、対象となる要素にpositionが与えられており、かつその値がstatic以外の場合に有効となります。

この機能の振る舞いは位置指定の状態に影響を受けます。具体的な特徴は以下の通りです。

• positionの値がabsoluteまたはfixedの場合、topは包含ブロックの上辺からの距離を決定します
• positionの値がrelativeの場合、topは親要素の上辺から下へ移動する量を決定します
• positionの値がstickyの場合、topは粘着する包含ブロックの上辺からの位置を決定します
• positionの値がstaticの場合、topは無効になります

位置指定に関するプロパティには以下のものがあり、これを複数組み合わせて使用します。

• 上からの距離：topプロパティ
• 右からの距離：rightプロパティ
• 下からの距離：bottomプロパティ
• 左からの距離：leftプロパティ
• 重なる順序　：z-indexプロパティ

topに指定できる値

auto

既定値に従います。bottomが指定されていた場合は、その値が採用されます。

<length>

包含ブロックの上辺との距離を数値と長さの単位で指定します。一般的にはpxやemを使用します。

<percentage>

包含ブロックの高さに対する割合で配置位置を指定します。

initial

初期値を表す共通のキーワードです。

inherit

親要素の値を継承する共通のキーワードです。

revert

プロパティの値がその時点で変更がなければ、他のスタイルにさかのぼって値を参照する共通のキーワードです。

unset

プロパティの値をリセットして親要素の継承値、それ以外は初期値を設定し直す共通のキーワードです。

topの使い方とサンプル

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

/* キーワード値 */
top: auto;

/* <length>値 */
top: 10px;
top: -10px;
top: 1.8em;
top: 5vh;

/* <percentage>値 */
top: 10%;
top: -10%;

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

それでは簡単な例を見てみましょう。包含ブロックの中に複数の要素を配置し、それぞれの位置を調整すると以下のように表示されます。

#sample_box {
	position: relative;
	width: 240px;
	height: 200px;
	background-color: #ccc;
}
div > div {
	position: absolute;
	width: 50px;
	height: 50px;
}
#item1 {
	top: 10px;
	left: 10px;
	background-color: #fc605b;
}
#item2 {
	top: 4em;
	left: 4em;
	background-color: #76fc5b;
}
#item3 {
	bottom: 50%;
	left: 50%;
	background-color: #5b96fc;
}

<div id="sample_box">
	<div id="item1">1</div>
	<div id="item2">2</div>
	<div id="item3">3</div>
</div>

位置指定をした要素が重なる場合は、カスケードの優先順位が高い方が手前に表示されます。

#sample_box {
	position: relative;
	height: 240px;
	padding: 5px;
	border: 1px solid #666;
}
div > div {
	position: absolute;
	min-width: 200px;
	height: 100px;
	padding: 5px;
	border: 1px solid #999;
}
#item1 {
	top: 30px;
	left: 30px;
	background-color: #ffcccc;
}
#item2 {
	top: 100px;
	left: 100px;
	background-color: #ccccff;
}

<div id="sample_box">
	sample_box

	<div id="item1">
		item1<br>
		・top:30px;<br>
		・left:30px;<br>
	</div>

	<div id="item2">
		item2<br>
		・top:100px;<br>
		・left:100px;<br>
	</div>

</div>