CSStop プロパティは、位置指定要素 (positioned elements) の垂直位置の決定に関与します。位置指定されていない要素には効果はありません。

top の効果は、要素がどの様に配置されているか (つまり、 position プロパティの値) によって変わります。

  • positionabsolute 又は fixed に設定されている場合、 top プロパティは要素の上辺と包含ブロックの上辺との間の距離を指定します。 (内包ブロックには position: relative が必要です)
  • positionrelative に設定されている場合、 top プロパティは要素の上辺が通常位置から下方へ移動する量を指定します。
  • positionsticky に設定されている場合、 top プロパティは要素がビューポート内にある場合は positionrelative であるかのように、外の場合は positionfixed の場合と同様に動作します。
  • positionstatic に設定されている場合、 top プロパティは効果がありません

topbottom の両方が指定されており、かつ height が未指定か auto100% の場合、 topbottom の距離が尊重されます。それ以外の場合、 height が何らかの形で制約されていた場合、 top プロパティが優先されて bottom プロパティは無視されます。

構文

/* <length> 値 */
top: 3px;
top: 2.4em;

/* 内包ブロックの高さに対する <percentage> */
top: 10%;

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

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

<length>
負、null、または正の <length> で、以下のものを表します。
  • 絶対位置指定要素の場合は、包含ブロックの上辺までの距離。
  • 相対位置指定要素の場合は、通常の位置からの下方向への移動量。
<percentage>
包含ブロックの高さに対する <percentage> です。
auto
以下のように指定します。
  • 絶対位置指定要素では、要素の位置は bottom プロパティに基づいて決まり、 height: auto は内容物の高さに基づいて決まります。また、 bottomauto であった場合は、要素は垂直方向には静的要素が配置される場合と同様に配置されます。
  • 相対位置指定要素では、通常の位置から要素までの距離は bottom に基づきます。また、 bottomauto であった場合は、垂直方向には移動しません。
inherit
値が親要素 (包含ブロックとは限りません) の計算値と同じであることを示すキーワードです。そして、この計算値は <length>, <percentage>, 又は auto キーワードと同様に扱われます。

形式文法

<length> | <percentage> | auto

body {
  background: beige;
}

div {
  position: absolute;
  top: 10%;
  right: 40%;
  bottom: 20%;
  left: 15%;
  background: gold;
  border: 1px solid blue;
}
<div>この内容の寸法は、辺の位置によって決まります。</div>

仕様書

仕様書 状態 備考
CSS Transitions
top の定義
草案 top をアニメーション可能として定義
CSS Positioned Layout Module Level 3
top の定義
草案 sticky の位置の動作を追加
CSS Level 2 (Revision 1)
top の定義
勧告 初回定義

初期値auto
適用対象配置された要素
継承なし
パーセンテージ包含ブロックの高さ
メディア視覚
計算値長さで指定されると相当する絶対的な長さ、パーセンテージとして指定されると指定値、それ以外では auto
アニメーションの種類length または percentage, calc();
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 5
補足
完全対応 5
補足
補足 In Internet Explorer versions before 7, when both top and bottom are specified, the element position is overconstrained and the top property has precedence; the computed value of bottom is set to -top, while its specified value is ignored.
Opera 完全対応 6Safari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

ドキュメントのタグと貢献者

最終更新者: mfuji09,