1. 開発者向けのウェブ技術
  2. CSS
  3. リファレンス
  4. プロパティ
  5. top

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

top

Baseline 広く利用可能 *

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

* この機能の一部は、対応レベルが異なる場合があります。

top は CSS のプロパティで、位置指定要素の垂直位置を設定します。このインセットプロパティは、位置指定されていない要素には効果がありません。

試してみましょう 

top: 0;

top: 4em;

top: 10%;

top: 20px;

<section id="default-example">
 <div class="example-container">
 <div id="example-element">これは絶対位置指定されています。</div>
 <p>
 まるで地球の表面から水が引き始めたかのように、通りは泥だらけで、ホルボーン通りを象のようなトカゲのようによちよち歩く、体長 12 メートルほどのメガロサウルスに出会っても不思議ではないでしょう。
 </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 プロパティは、要素の上端の外側のマージンと、その包含ブロックの上端の内側の境界線との間の距離を指定します。または、値内で anchor() 関数が使用されている場合、位置指定要素の場合、値内で anchor() 関数が使用されているときは、指定された <anchor-side> の辺を基準とします。top プロパティは、top、bottom、start、end、self-start、self-end、center、および <percentage> 値と互換性があります。
  • 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;
top: anchor(bottom);
top: anchor-size(--my-anchor self-block, 10%);
/* 包含ブロックの高さに対する <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 であった場合は、垂直方向には移動しません。

公式定義

初期値 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>

仕様書

仕様書
CSS Positioned Layout Module Level 3
# insets

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

AltStyle によって変換されたページ (->オリジナル) /