備忘録的プログラミングリファレンス

topプロパティ

　topプロパティは、エレメントの垂直位置を指定するプロパティです。上端が基準になります。 ただし、positionプロパティがstatic以外であることが必要で、positionプロパティの値によって表示位置の基準が変わります。

ウィンドウの上から100pxに配置
top: 100px;

　以下は、positionプロパティと表示位置の変化についてです。

positionの値概要
position:static;topプロパティは反映されない。
position:absolute;絶対位置の設定で、基準位置はウィンドウの上端。親エレメント（親要素）にpositon:static;以外が設定されていれば、親エレメントの上端。
position:fixed;絶対位置の設定でスクロールに影響を受けない。ウィンドウ上の表示位置が固定される。基準位置はウィンドウの上端。
position:relative;相対位置の設定で、基準位置はデフォルトで表示される位置。
position:sticky;スクロールに影響を受けるために、topプロパティはposition:sticky;によって位置が固定された時の垂直配置。位置が固定されていない間はtopプロパティは影響しない。

エレメント内の相対位置

　親エレメントに対して配置を設定するには、親エレメントに対してposition:relative;を指定し、エレメントに対してはposition:absolute;を指定します。

　この時にエレメントの大きさがデフォルトで100%でも自動で調整されることに注意が必要です。エレメントの幅を指定し直す必要があるかもしれません。

/* 親エレメントへの指定 */
parent_element {
		position: relative;
}

/* 調整したいエレメントへの指定 */
element {
		position: absolute;
		width: 100%;
		top: 10px;
}

関連プロパティ

　関連するプロパティに以下があります。

left左端からを基準にした左右の表示位置
right右端からを基準にした左右の表示位置
bottom下端からを基準にした上下の表示位置

構文(Syntax)

CSS

top: auto | length | initial | inherit;

DOM(JavaScript)

値の取得
String = object.style.top;
値の設定
object.style.top="auto | length | initial | inherit";

値（Values）

Value摘要
autodefault値。初期の位置
length数値による設定、CSS長さの単位を参照
initial初期値に戻す
inherit親要素（親エレメント）のプロパティを継承

備考（Remarks）

Default valueauto
Inherited（継承）No
AnimatableYes

Example

　topによる位置の例です。 親エレメントにposition:relative;、エレメントにposition:absolute;を指定し、親エレメントを表示位置の基準にしています。