【CSS Modules】topプロパティの使い方
topプロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
topプロパティは、CSSレイアウトにおいて要素の上端位置を定義するプロパティです。このプロパティは、要素のpositionプロパティがstatic以外の値、すなわちrelative、absolute、fixed、またはstickyに設定されている場合にのみ効果を発揮します。
position: relativeの要素にtopを設定すると、要素は自身の通常の配置位置から指定された距離だけ上方向へ移動します。これは、元の場所からの相対的なオフセットとして機能します。
一方、position: absoluteの要素にtopを設定すると、要素は一番近い定位された祖先要素（positionプロパティがstatic以外に設定されている祖先要素）の上端から指定された距離だけ配置されます。position: fixedの要素では、ビューポート（ブラウザの表示領域）の上端からの距離を基準に位置を決定します。
position: stickyの要素では、スクロール時にビューポートまたは最も近いスクロールコンテナの上端に到達した際に、指定されたtopの値で要素が固定されるように動作します。
topプロパティには、pxやemなどの具体的な長さを表す値、包含ブロックの高さに対する割合を示す%値、またはブラウザが自動的に位置を計算するautoを指定できます。例えば、top: 20px;と設定すると、要素の上端が基準点から20ピクセル下に配置されます。
topとbottomプロパティが同時に指定され、かつ要素のheightがautoではない場合、通常はtopプロパティが優先されます。しかし、heightがautoの場合は、両方のプロパティが要素の高さに影響を与え、要素を特定の範囲に引き伸ばすような挙動を示します。
構文(syntax)
1top: 0;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません