Style top属性

定義と使用法

top 属性設定または定位する要素のトップ位置を返します。

この属性は、内側マージン、スクロールバー、ボーダー、およびマージンを含む要素のトップ位置を定義します。

ヒント：定位する要素は position属性 を設定します：relative、absolute または fixed。

ヒント：定位する要素の底部位置を設定または返すには、 bottom属性。

も参照してください：

CSSチュートリアル：CSS 定位

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

例

例1

<button>要素のトップ位置を設定：

document.getElementById("myBtn").style.top = "100px";

自分で試してみる

例2

負の値を使用して - <div>要素のトップ位置を設定：

document.getElementById("myDiv").style.top = "-100px";

自分で試してみる

例3

<div>要素のトップ位置を返します：

alert(document.getElementById("myDiv").style.top);

自分で試してみる

文法

top属性を返す：

object.style.top

top属性を設定：

object.style.top = "auto|length|%|initial|inherit"

属性値

値 説明
auto ブラウザがトップ位置を設定します。デフォルト。
length 長さ単位でトップ位置を定義します。負値も許可されます。
% 親要素の高さのパーセントでトップ位置を設定します。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit 親要素からこの属性を継承します。参照してください inherit。

技術的詳細

デフォルト値： なし
返り値： 文字列で、定位する要素のトップ位置を示します。
CSSバージョン： CSS2

ブラウザがサポートしています

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート