CSSのpositionとは？仕組み・種類・使い方を徹底解説

💡 この記事でわかること

positionとは、
👉 要素をどのような基準で配置するかを決めるCSSプロパティです。

💡 通常、HTML要素は上から下へ順番に並んでいきますが、positionを使うと「特定の場所に固定する」「他の要素の上に重ねる」といった、通常の流れとは違う配置ができるようになります。値は次の5種類があり、それぞれ基準となる位置や動きが異なります。

staticは、何も指定しないときの初期値です。要素はHTMLに書かれた順番通りに、上から下へ普通に並びます。

.box {
  position: static; /* 省略した場合と同じ */
}

👉 staticの要素にはtop・leftなどの座標指定が効きません。座標で位置をずらしたい場合は、次に紹介するrelative以降のいずれかを指定する必要があります。

relativeを指定すると、要素は通常の位置(static時の位置)を基準にして、top・left・right・bottomでずらせるようになります。

.box {
  position: relative;
  top: 10px;  /* 元の位置から下に10px */
  left: 20px; /* 元の位置から右に20px */
}

💡 relativeでずらしても、他の要素はまるで元の位置に要素があるかのように配置されます(見た目だけがずれる)。レイアウト全体には影響を与えず、少しだけ位置を微調整したいときに使います。

👉 relativeにはもう1つ重要な役割があります。次に説明するabsoluteの「基準」を作れることです。

absoluteを指定すると、要素は通常の流れから外れて、直近にある「position: static以外(relative・absolute・fixed・sticky)が指定された祖先要素」を基準に配置されます。該当する祖先要素がない場合は、ページ全体(body)が基準になります。

.card {
  position: relative; /* 基準になる箱 */
}

.badge {
  position: absolute;
  top: 8px;
  right: 8px; /* .cardの右上に配置される */
}

👉 「absoluteを使うときは、基準にしたい親要素にposition: relativeを付け忘れない」のが最重要ポイントです。これを忘れると、意図しない位置(ページ全体を基準にした位置)に飛んでいってしまいます。

💡 absoluteの要素は「通常の流れ」から取り除かれるため、他の要素はその要素が存在しないかのように詰めて配置されます。この点がrelativeとの大きな違いです。

fixedを指定すると、要素はブラウザの画面(ビューポート)を基準に固定されます。ページをスクロールしても、常に画面の同じ位置に表示され続けます。

.floating-button {
  position: fixed;
  bottom: 20px;
  right: 20px; /* スクロールしても画面右下に固定 */
}

👉 「ページ上部に常に表示されるヘッダー」や「常に画面の隅に出ているお問い合わせボタン」などによく使われます。

stickyは、普段はstaticのように通常の位置に表示され、指定した位置までスクロールすると、そこでfixedのように固定されるという少し特殊な値です。

.section-heading {
  position: sticky;
  top: 0; /* 画面上端に来たら、そこで固定される */
}

💡 目次の見出しや、記事一覧のカテゴリ見出しなど、「ある範囲をスクロールしている間だけ追従させたい」場面に向いています。fixedと違い、親要素の範囲を超えると一緒に流れていくのが特徴です。

5つの値の「基準」「特徴」「主な用途」を表にまとめると、次のようになります。

positionの5つの値の違いをまとめると、次のようになります。

👉 まずは「absoluteを使うときは親にrelativeを付ける」というセットの関係だけでも覚えておくと、実際のコーディングでつまずきにくくなります。バッジ配置や追従メニューなど、実際にコードを書きながら試してみましょう。