topプロパティ
topプロパティは、エレメントの垂直位置を指定するプロパティです。上端が基準になります。 ただし、positionプロパティがstatic以外であることが必要で、positionプロパティの値によっても表示に変化があります。
position: fixed; top: 100px;
| 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;
}
構文(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 |