top

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

試してみましょう

top: 0;

top: 4em;

top: 10%;

top: 20px;

<section id="default-example">
  <div class="example-container">
    <div id="example-element">I am absolutely positioned.</div>
    <p>
      As much mud in the streets as if the waters had but newly retired from the
      face of the earth, and it would not be wonderful to meet a Megalosaurus,
      forty feet long or so, waddling like an elephantine lizard up Holborn
      Hill.
    </p>
  </div>
</section>

.example-container {
  border: 0.75em solid;
  padding: 0.75em;
  text-align: left;
  position: relative;
  width: 100%;
  min-height: 200px;
}

#example-element {
  background-color: #264653;
  border: 4px solid #ffb500;
  color: white;
  position: absolute;
  width: 140px;
  height: 60px;
}

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

  • position が absolute または fixed に設定されている場合、 top プロパティは要素の上辺と包含ブロックの上辺との間の距離を指定します。
  • position が relative に設定されている場合、 top プロパティは要素の上辺が通常位置から下方へ移動する量を指定します。
  • position が sticky に設定されている場合、 top プロパティは粘着制約矩形の計算に使用されます。
  • position が static に設定されている場合、 top プロパティは効果がありません。

top と bottom の両方が指定されている場合は、 3 つの異なる場合があります。

  • position が absolute または fixed に設定されており、 height が指定されていない（auto または 100% である）場合、 top および bottom の両方が尊重されます。
  • position が relative に設定されているか、 height が指定されている場合、 top プロパティが優先され、 bottom プロパティは無視されます。
  • position が sticky に設定されている場合、 top と bottom の両方の値が考慮されます。つまり、粘着位置指定要素は、要素の位置ボックスがそのブロック内に収まっている限り、これら 2 つのプロパティの値に基づいて、そのブロック内で上下に移動できる可能性があります。

構文

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

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

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

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

値

<length>

負、null、または正の <length> で、以下のものを表します。

  • 絶対位置指定要素の場合は、包含ブロックの上辺までの距離。
  • 相対位置指定要素の場合は、通常の位置からの下方向への移動量。
<percentage>

包含ブロックの高さに対する <percentage> です。

auto

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

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

値が親要素（包含ブロックとは限りません）の計算値と同じであることを示すキーワードです。そして、この計算値は <length>, <percentage>, または auto キーワードと同様に扱われます。

公式定義

初期値auto
適用対象位置指定要素
継承なし
パーセント値包含ブロックの高さに対する相対値
計算値長さで指定されると相当する絶対的な長さ、パーセント値として指定されると指定値、それ以外では auto
アニメーションの種類length または パーセント値, calc();

形式文法

top = 
  auto                 |
  <length-percentage>  |
  <anchor()>           |
  <anchor-size()>      

<length-percentage> = 
  <length>      |
  <percentage>  

<anchor()> = 
  anchor( <anchor-name>?                  &&
  <anchor-side> , <length-percentage>? )  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<anchor-name> = 
  <dashed-ident>  

<anchor-side> = 
  inside        |
  outside       |
  top           |
  left          |
  right         |
  bottom        |
  start         |
  end           |
  self-start    |
  self-end      |
  <percentage>  |
  center        

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline

例

位置指定要素を上から 10% に設定

css
body {
  background: beige;
}

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

仕様書

Specification
CSS Positioned Layout Module Level 3
# insets

ブラウザーの互換性

関連情報