CSS top 属性

定義と用法

top属性は要素の上部端の位置を定義します。この属性は、定位要素の上外縁マージンと含むブロックの上端の間のオフセットを定義します。

注記：position属性の値が"static"の場合、top属性の設定は何も効果がありません。

説明

static要素に対してauto；長さ値の場合、対応する絶対長さ；パーセンテージ値の場合、指定された値；それ以外の場合、autoです。

相対的に定義された要素に対して、topおよびbottomがautoの場合、その計算値はともに0です；そのうちの1つがautoの場合、もう一方の値の反対数を取ります；どちらもautoでない場合、bottomはtopの値の反対数を取ります。

も参照してください：

CSS 教程：CSS 定位

HTML DOM リファレンスマニュアル：top 属性

例

画像の上端を含む要素の上端から5ピクセル下の位置に設定します：

img
  {
  position:absolute;
  top:5px;
  }

自分で試してみる

CSS 语法

top: auto|length|initial|inherit;

属性値

値 説明
auto デフォルト値。ブラウザが上端の位置を計算します。
% 要素の上端位置をパーセンテージで設定します。負値を使用できます。
length px、cmなどの単位で要素の上端位置を設定します。負値を使用できます。
inherit 親要素から top 属性の値を継承するべきことを定義します。

技術的な詳細

デフォルト値： auto
継承性： no
バージョン： CSS2
JavaScript 言語： object.style.top="50px"

さらに多くの例

固定値で画像の上端を設定する
この例では、固定値で画像の上端を設定する方法を示します。
パーセンテージで画像の上端を設定する
この例では、パーセンテージで画像の上端を設定する方法を示します。

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
1.0 5.0 1.0 1.0 6.0