CSS top

CSS の top プロパティを使うと、要素を表示する位置を上からの距離で指定することができます。どこからの距離とするかの基準点を指定する position プロパティと組み合わせて使用します。この記事を見れば、top プロパティの使い方が理解できます。

書式

top : auto
top : length
top : percentage

属性値

CSS の top プロパティには、以下に示すいずれかの値を指定できる。

auto
ユーザーエージェントが自動的に位置を決定する。 
top: auto;
length
position プロパティで指定した場所を基準として、上からの位置を絶対値で指定する。以下に示す単位を利用できる。
単位
単位 意味 説明
em フォントサイズ
rem root em ドキュメントのルート要素のフォントサイズ
cm centimeters 1cm
mm millimeters 1mm
Q 級 (quarter-millimeters) 0.25mm
in inches 1 inch
pc picas 1/6 inch
pt points 1/72 inch
px pixels 1/96 inch
vw viewport width ビューポートの幅の1/100
vmin minimum viewport ビューポートの幅または高さで小さい方の1/100
vmax maximum viewport ビューポートの幅または高さで大きい方の1/100
percentage
position プロパティで指定した場所を基準として、上からの位置を親要素の高さに対するパーセンテージで指定する。 
top: 50%;

初期値

auto

適用対象

position プロパティの値が absolute、fixed、relative または sticky である要素に対して top プロパティを適用できる。position プロパティの値が static である要素に対しては、top プロパティを適用できない。

positionとtopの関係
position top
absolute ページの上からの距離
fixed 表示領域の上からの距離
relative 現在位置からの相対位置
static（初期値） 効かない
sticky ✓

position: absolute

position プロパティに absolute を指定した場合、top プロパティで指定する位置は、HTML文書全体のレイアウトにおける絶対位置を示す。例えば、top: 0 の場合、HTML文書の最上部に表示される。

position: absolute
図1 position: absolute

表示位置をページの最上部に固定する例を以下に示す。

<div style="position: absolute; top: 2px; background-color: aquamarine">
  このメッセージはページ最上部に表示されます。
</div>
このメッセージはページ最上部に表示されます。

position: fixed

position プロパティに fixed を指定した場合、top プロパティで指定する位置は、表示領域のレイアウトにおける固定位置を示す。例えば、top: 0 の場合、表示領域の最上部に表示される。表示領域を上へスクロールしても、常に表示領域の最上部に表示される。

position: fixed
図2 position: fixed

表示位置を表示領域の最上部に固定する例を以下に示す。

<div style="position: fixed; top: 2px; left: 2px; background-color: aquamarine; z-index: 1">
  このメッセージは画面最上部に固定されます。
</div>
このメッセージは画面最上部に固定されます。

position: relative

position プロパティに relative を指定した場合、top プロパティで指定する位置は、現在の位置からの相対位置を示す。

次に top プロパティを使用したHTMLの例を示します。

<p>通常位置から<span style="position: relative; top: 0.5em">0.5文字分下げる。</span></p>

通常位置から0.5文字分下げる。

position: static

position プロパティに static を指定した場合、top プロパティの指定は効かない。

CSS の top プロパティの指定が効かない場合は、position プロパティの値が absolute、fixed、relative または sticky のいずれかであることを確認する。position プロパティを明示的に指定していなければ、初期値である static であるため、top プロパティの指定は効かない。

継承

top プロパティは親要素の計算値を継承しない。

JavaScript

JavaScript からは要素オブジェクトの style.top プロパティで top を参照及び設定できる。

<script>
  document.getElementById("example1").style.top = "1rem";
  document.querySelector("#example2").style.top = "50%";
<script>

関連記事

参考文献

The World Wide Web Consortium (2025) CSS Positioned Layout Module Level 3