【CSS】positionのプロパティまとめ

relative

<div style="position: relative; left: 20px; top: 10px;">
  相対位置で移動
</div>

左に20px、上に10px移動します。

absolute

<div style="position: relative;">
  <div style="position: absolute; top: 0; right: 0;">
    絶対位置で配置
  </div>
</div>

この内側のdivは、親要素の右上角に配置されます。

fixed

<div style="position: fixed; bottom: 0; left: 0;">
  画面の左下に固定
</div>

の要素は、ビューポートの左下に固定され、スクロールしても位置が変わりません。

sticky

<div style="position: sticky; top: 0;">
  スクロールに応じて固定
</div>

この要素は、ページをスクロールするとトップに"固定"されます。