CSSのpositionプロパティの使い方と解説｜static、relative、absolute、fixedの違いとは

positionとは

CSSのpositionプロパティは、要素の配置方法を指定するためのプロパティです。positionプロパティは、要素が通常のドキュメントフローからどのように外れるかを制御します。

staticの使い方

staticはpositionプロパティの初期値であり、通常のドキュメントフローに要素を配置します。staticな要素は他のposition値とは異なり、top、right、bottom、left、z-indexプロパティは適用されません。

以下はstaticを指定した要素の例です。

.static-element {
  position: static;
}

relativeの使い方

relativeは、要素を通常のドキュメントフローに基づいた位置から相対的に配置します。relativeな要素は、自身の位置を基準に、top、right、bottom、leftプロパティを使用して微調整することができます。

以下はrelativeを指定した要素の例です。

.relative-element {
  position: relative;
  top: 10px;
  left: 20px;
}

absoluteの使い方

absoluteは、要素を通常のドキュメントフローから取り除き、最も近い親要素またはルート要素（body）を基準に配置します。absoluteな要素は、top、right、bottom、leftプロパティを使用して位置を指定します。

以下はabsoluteを指定した要素の例です。

.absolute-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

fixedの使い方

fixedは、要素をビューポート（画面上の固定された位置）に対して配置します。スクロールしても要素は画面上に固定されます。fixedな要素はtop、right、bottom、leftプロパティを使用して位置を指定します。

以下はfixedを指定した要素の例です。

.fixed-element {
  position: fixed;
  top: 20px;
  right: 20px;
}

以上が、CSSのpositionプロパティの使い方です。