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 | 摘要 |
|---|
| auto | default値。初期の位置 |
| length | 数値による設定、CSS長さの単位を参照 |
| initial | 初期値に戻す |
| inherit | 親要素（親エレメント）のプロパティを継承 |
Remarks（備考）
| |
|---|
| Default value | auto |
| Inherited（継承） | No |
| Animatable | Yes |
