CSS

top sets how far an element is moved from the top. This page shows how it behaves with relative, absolute, fixed, and sticky, explains what “%” means, and gives quick tips for when it doesn’t work—plus short, copy-paste examples.

top

top プロパティは、ボックスを配置する場合の、上からの配置位置（距離）を指定する際に使用します。 上からの配置位置（距離）とは、基準位置の上端から配置するボックスの上端までの距離を指します。

top プロパティで指定するのは基準位置からの距離のみです。 実際の表示位置の指定には、position プロパティを併用して、配置方法（基準位置）を設定する必要があります。 尚、top プロパティの値は、position プロパティの値が static 以外のときに有効となります。

要点（まずやさしく）

top は「上からどれだけズラすか」を決めるプロパティです。position が static のままだと効きません。relative・absolute・fixed・sticky で働き方が変わります。

指定できる値は auto、長さ（例：px, rem など）、%（原則は“高さ”が基準）です。負の値も使えます。

position ごとの効き方

position: relative
元の位置から上下にズラします（レイアウト上は“元の場所”が確保されたまま）。
position: absolute
もっとも近い「位置指定された祖先（position が static 以外）」を基準に、上からの距離を決めます。該当がなければページ全体が基準。
position: fixed
ビューポート（画面）を基準に固定します。
position: sticky
スクロールで要素が近づいたとき、top に達した位置で“貼り付く”しきい値として動きます。

%（パーセント）の基準

top: 20% は、一般に“高さ”に対する 20% です。absolute なら基準の箱の高さ、fixed ならビューポートの高さが使われます。

動かないときのチェック

四辺まとめ
inset（= top + right + bottom + left）。例：inset: 0;
論理プロパティ
書字方向対応なら inset-block-start（top 相当）
アニメで滑らかに
transform: translateY() を使うと描画が軽くなる場面があります

ミニ実例（コピペしてOK）

HTML

<!-- relative で少し持ち上げる -->
<div class="tag">NEW</div>
<style>
	.tag { position: relative; top: -4px; }
</style>

HTML

<!-- 親を基準に絶対配置 -->
<div class="box">
	<button class="close">×</button>
</div>
<style>
	.box { position: relative; }
	.close { position: absolute; top: 8px; right: 8px; }
</style>

HTML

<!-- スクロールで貼り付くヘッダー -->
<header class="siteHeader">メニュー</header>
<style>
	.siteHeader { position: sticky; top: 0; background: #fff; }
</style>

FAQ

Q. top が効かないのはなぜ？
A. position が static、基準の親に position がない、sticky でスクロールや高さが足りない、などが代表例です。
Q. top: 20% の % は何に対する割合？
A. 基本は“高さ”です。absolute は基準の箱の高さ、fixed はビューポートの高さが基準です。
Q. top と transform: translateY() の使い分けは？
A. レイアウトの位置決めなら top、アニメーション中心なら translateY が向きます。
Q. 四辺をまとめて書くには？
A. inset を使います（例：inset: 0;）。論理方向なら inset-block-start が top 相当です。