Top プロパティ

最終更新：2026-09-13

top Top プロパティ

top プロパティは、配置された要素がその包含ブロックの上辺からどれだけ離れているか（オフセット）を定義します。このプロパティが適用されるのは、position が relative・absolute・fixed・sticky の要素だけであり、要素の垂直方向の位置を正確に制御するために使われます。

カテゴリ
初期値	auto
継承	いいえ
適用対象	配置済み要素
アニメーションタイプ	length
CSS バージョン	CSS2
状態	標準

📝 構文

top: auto | <length> | <percentage>;

⚙️ 値

値	タイプ	説明
`auto`	キーワード	オフセットなし。
`<length> \| <percentage>`	タイプ	包含ブロックに対する相対的なオフセット値。

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
top	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザーでサポート

注意： top が影響するのは配置された（static 以外の）要素だけです。position:static の要素に設定しても効果はありません。

ヒント： パーセント値は包含ブロックの高さを基準に計算されます。auto を指定すると、ブラウザーが他のプロパティから位置を解決します。

❓ よくある質問

Qtop と bottom を両方設定するとどうなりますか？

A状況によります。height が指定されていない absolute または fixed 要素では、top と bottom の間を埋めるように要素が伸び、高さが自動調整されます。relative の場合は top が優先され bottom は無視されます。height も指定されている場合も、top が優先されて bottom は無視されます。この挙動は、親要素内で要素を垂直方向に引き伸ばす（背景レイヤーを全高にするなど）場合によく使われます。

Qtop のパーセントは何を基準にしますか？

Aパーセントは包含ブロックの高さを基準に計算されます。absolute 要素の包含ブロックは最も近い配置済み祖先の padding box です。fixed の場合はビューポート、relative の場合は要素自身の元の位置です。つまり top:50% とすると、要素の上辺が包含ブロックの高さの半分の位置に来ます。垂直方向の中央揃えによく使われ、transform:translateY(-50%) と組み合わせます（transform は要素自身の高さの半分だけ移動するためです）。

Qtop が効かないのはなぜですか？

A最も多い原因は要素が配置されていないことです。top は position が relative・absolute・fixed・sticky の要素にのみ効き、デフォルトの static では完全に無視されます。また、値が有効（auto・長さ・パーセント）であるか、height などのプロパティで上書きされていないかも確認してください。まず position を確認し、次にオフセットの計算を検証します。

Qtop:50% で垂直方向に中央揃えするには？

A要素に position:absolute を設定し、親に position:relative を設定します。次に top:50% で上辺をコンテナーの中央に置き、transform:translateY(-50%) を適用して要素自身の高さの半分だけ上に移動させます。これで垂直中央揃えになります。transform は要素自身の高さの 50% だけ動かす点が top のパーセントとは異なり、両方を組み合わせることで内容のサイズにかかわらず真の中央揃えが実現できます。