Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

概要

CSS の top プロパティは、位置指定された要素 (positioned elements) の位置を定義します。位置指定されていない要素には効力を持ちません。

絶対位置指定要素( position absolute または fixed である要素)では、要素のマージン境界の上辺と包含ブロックの上辺の距離を定義します。

相対位置指定要素( position relative である要素)では、通常位置からの下方への移動量を定義します。

topbottom の両方が定義されると、要素の位置は 過制約 (over-constrained) の状態になり、top プロパティが優先されます: bottom の計算値には -top がセットされ、指定した値は無視されます。

初期値auto
適用対象配置された要素
継承不可
相対値の基準包含ブロックの高さ
メディアvisual
計算値長さで指定されると相当する絶対的な長さ、パーセンテージとして指定されると指定値、それ以外では auto
アニメーションの可否可。 。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちますの値として補完しますlength または percentage, calc();
正規順序形式文法で定義される一意のあいまいでない順序

構文

形式文法: <length> | <percentage> | auto
top: 3px         /* <length> 値 */
top: 2.4em

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

top: auto

top: inherit

<length>
次の意味を持つ負、null、または正の <length>:
  • 絶対位置指定要素 では包含ブロックの上辺までの距離
  • 相対位置指定要素 では、位置指定されなかった場合に通常フローで位置する座標からの移動量。
<percentage>
包含ブロックの高さに対する <percentage> で、概要にあるような用途に使われます。
auto
次の意味を持つキーワードです:
  • 絶対位置指定要素では、bottom に基づく位置。height: auto を、コンテンツに基づく高さとみなします。
  • 相対位置指定要素では、bottom に基づく元々の位置からの移動量。bottomauto の場合には、まったく移動しません。
inherit
値が親要素(包含ブロックではないかもしれません)からの計算値と同じであることを示すキーワードです。そして、この計算値は <length><percentage>、もしくは auto キーワード であったかのように扱われます。

/* div操作が目的なら、body は px 単位でセットすることもできました */
body{
  width: 100%;
  height: 100%;
}

/* これで div の設定は % 単位で操作できます(body の w と h が セットされています) */
div {
  position: absolute;
  left: 15%;
  top: 30%;
  bottom: 30%;
  width: 70%;
  height: 40%;
  text-align: left;
  border: 3px rgb(0,0,0) solid;
}
 <?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
   <head>
     <meta http-equiv="Content-Type" content="application/xhtml+xml" />
     <title>Mozilla.org height top left width percentage CSS</title>
     <style type="text/css">
       /* The body could be set using px unit also for the div to operate */
       body {
         width: 100%;
         height: 100%;
       }
       /* The div can now operate the settings with % unit (body w and h are set) */
       div {
         position: absolute;
         left: 15%;
         top: 30%;
         bottom: 30%;
         width: 70%;
         height: 40%;
         text-align: left;
         border: 3px rgb(0,0,0) solid;
       }
     </style>
   </head>
   <body>
      <center>
        <div>
             ...Some content...
        </div>
      </center>

   </body>
 </html>

仕様書

仕様 策定状況 コメント
CSS Transitions
top の定義
草案 top をアニメーション可能として定義
CSS Level 2 (Revision 1)
top の定義
勧告 初回定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート (有) 1.0 (1.7 or earlier) (有) (有) (有)
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート ? ? ? ? ? ?

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

タグ: 
 このページの貢献者: YuichiNukiyama, Simplexible, Prinz_Rana, fscholz, teoli, ethertank, sosleepy
 最終更新者: YuichiNukiyama,