CSSのpositionプロパティ

CSSのpositionプロパティは、要素がページ上のどこに配置されるかを決定します。要素を移動させるには、top、right、bottom、leftを使用します。

配置には主に5つのタイプがあります。

Static これはデフォルトの設定です。要素はページの通常の順序に従います。ここでは、topやleftプロパティを使用しても何も起こりません。

Relative これは、元の位置に基づいて要素を移動させます。topに20pxを追加すると、要素は下に移動します。他の要素は元の位置に留まり、その隙間を埋めることはありません。

Absolute これは、要素を通常のページフローから切り離します。最も近い、positionが指定されている祖先要素に基づいて位置が決まります。

その他のタイプには、FixedとStickyがあります。Fixed要素は、スクロールしても同じ場所に留まります。Sticky要素は、特定のポイントに到達するまではrelative要素のように動作し、その後は固定されます。

これらのプロパティの詳細はこちらで学べます。

出典: https://dev.to/kavin_loyola_660466e5ea96/css-position-properties-23o8