top

ジャンプ先:
  1. 概要
  2. 構文
  3. 例
  4. 仕様書
  5. ブラウザ実装状況

概要

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

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

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

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

初期値auto
適用対象配置された要素
継承不可
相対値の基準包含ブロックの高さ
メディアvisual
計算値長さで指定されると相当する絶対的な長さ、パーセンテージとして指定されると指定値、それ以外では auto
Animation typelength または 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 に基づく元々の位置からの移動量。bottom も auto の場合には、まったく移動しません。
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 の定義		 勧告 初回定義

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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
基本サポート ? ? ? ? ? ?

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

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