top

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

このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

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

• position が absolute または fixed に設定されている場合、 top プロパティは要素の上辺と包含ブロックの上辺との間の距離を指定します。 (内包ブロックには position: relative が必要です)
• position が relative に設定されている場合、 top プロパティは要素の上辺が通常位置から下方へ移動する量を指定します。
• position が sticky に設定されている場合、 top プロパティは要素がビューポート内にある場合は position が relative であるかのように、外の場合は position が fixed の場合と同様に動作します。
• 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

以下のように指定します。

• 絶対位置指定要素では、要素の位置は bottom プロパティに基づいて決まり、 height: auto は内容物の高さに基づいて決まります。また、 bottom も auto であった場合は、要素は垂直方向には静的要素が配置される場合と同様に配置されます。
• 相対位置指定要素では、通常の位置から要素までの距離は bottom に基づきます。また、 bottom も auto であった場合は、垂直方向には移動しません。

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>

仕様書

ブラウザーの互換性

関連情報

• position, bottom, left, right