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

topプロパティ

 topプロパティは、positionプロパティで相対位置または絶対位置に設定されたエレメントの上下位置を指定するプロパティです。positionプロパティの値によって以下のように基準位置に変化があります。

position:static;
初期値。topプロパティが設定されてもエレメントの配置に影響しない。
position:absolute;
ウィンドウを基準にした絶対位置。親エレメントにpositon:static;以外が設定されていれば親エレメントの上端。
position:fixed;
ウィンドウを基準にした絶対位置。スクロールに影響を受けない。
position:relative;
相対位置の設定、基準位置はエレメントの初期値(default値)。
position:sticky;
スクロールに影響を受ける。topプロパティはposition:sticky;によって位置が固定された時の上下位置。位置が固定されていない間はtopプロパティは影響しない。
ウィンドウの上から100pxに配置
position: fixed;
top: 100px;

構文(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