top

トップ（レイアウトとボックスモデル）

意味上辺の位置

topとは？

topプロパティは、絶対位置または相対位置に配置された要素の上辺の位置を指定するために使用します。このプロパティは、要素がpositionプロパティで'absolute', 'relative', 'fixed', 'sticky'のいずれかに設定されている場合にのみ動作します。

topの具体的な使い方

要素を上からの距離で配置する例

<style>
    div {
        position: absolute;
        top: 20px;
        background-color: tomato;
    }
</style>

<div>
    このdiv要素はページの上から20ピクセルの位置にあります。
</div>

div要素をページの上から20ピクセルの位置に絶対配置します。

要素を親要素の垂直中央に配置する例

<style>
  .relative-parent {
    position: relative;
    height: 200px;
  }
  .child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
</style>

<div class="relative-parent">
  <div class="child">
    この要素は親要素の中央に配置されます。
  </div>
</div>

子要素を親要素の垂直中央に配置します。

topに関するよくある質問

Q. topプロパティはいつ使えますか？

A. topプロパティは、要素のpositionがabsolute、relative、fixed、またはstickyに設定されている場合にのみ効果があります。static（デフォルト）の場合は効果がありません。

Q. topの値にマイナスは使えますか？

A. はい、topにマイナス値を使用できます。例えば、top: -20pxとすると、要素は上方向に20ピクセル移動します。これは要素を「上に引っ張る」効果があります。

Q. topと他の配置プロパティの優先順位は？

A. 要素の高さが指定されている場合、topとbottomが競合すると、topが優先されます。同様に、左右方向ではleftがrightより優先されます。ただし、writing-modeによってこの挙動が変わる場合があります。

topが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのtopやmax-width、right、border-left、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。