top

by 2 contributors:

概要

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

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

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

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

  • 初期値auto
  • 適用対象位置指定された要素
  • 継承しない
  • 相対値の基準包含ブロックの高さ
  • メディアvisual
  • 計算値長さで指定されると相当する絶対的な長さ、パーセンテージとして指定されると指定値、それ以外では auto
  • アニメーションの可否可能。長さ、パーセンテージ、calc() として可能。どちらも長さなら長さとして補間。どちらもパーセンテージならパーセンテージとして補間。それ以外では、両方の値は 長さとパーセンテージの合計(各値はゼロかもしれません)を計算する calc() 関数に変換されます。これらの calc() 関数は、それぞれ補間結果を実数として持っています。
  • 正規順序形式文法で定義される一意のあいまいでない順序

構文

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

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

top: auto

top: inherit

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

ブラウザ実装状況

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

関連情報

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

タグ: 
Contributors to this page: ethertank, sosleepy
最終更新者: ethertank,
サイドバーを隠す