top
は CSS のプロパティで、位置指定要素の垂直位置の決定に関与します。位置指定されていない要素には効果はありません。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
top
の効果は、要素がどの様に配置されているか (つまり、 position
プロパティの値) によって変わります。
position
がabsolute
またはfixed
に設定されている場合、top
プロパティは要素の上辺と包含ブロックの上辺との間の距離を指定します。position
がrelative
に設定されている場合、top
プロパティは要素の上辺が通常位置から下方へ移動する量を指定します。position
がsticky
に設定されている場合、top
プロパティは粘着制約矩形の計算に使用されます。position
がstatic
に設定されている場合、top
プロパティは効果がありません。
top
と bottom
の両方が指定されており、 position
が absolute
または fixed
に設定されており、かつ height
が未指定 (auto
または 100%
のどちらか) の場合は、 top
と bottom
の距離が尊重されます。それ以外の場合、 height
が何らかの形で制約されていた場合、または position
が relative
に設定されていた場合は、 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
- 以下のように指定します。
inherit
- 値が親要素 (包含ブロックとは限りません) の計算値と同じであることを示すキーワードです。そして、この計算値は
<length>
,<percentage>
, またはauto
キーワードと同様に扱われます。
公式定義
初期値 | auto |
---|---|
適用対象 | 配置された要素 |
継承 | なし |
パーセンテージ | 包含ブロックの高さ |
計算値 | 長さで指定されると相当する絶対的な長さ、パーセンテージとして指定されると指定値、それ以外では auto |
アニメーションの種類 | length または percentage, calc(); |
形式文法
<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 Positioned Layout Module Level 3 top の定義 |
草案 | sticky の位置の動作を追加 |
CSS Level 2 (Revision 1) top の定義 |
勧告 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
関連情報
inset
は関連するtop
,bottom
,left
,right
プロパティすべての一括指定です- 対応する論理プロパティ:
inset-block-start
,inset-block-end
,inset-inline-start
,inset-inline-end
および一括指定のinset-block
とinset-inline
position