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

💡 この記事でわかること

• positionとは何か、なぜ必要なのか
• static・relative・absolute・fixed・stickyの違い
• top・left・right・bottomで位置を指定する方法
• 「基準となる親要素」の考え方(position: relativeとの組み合わせ)
• よくある使用例(バッジ・追従ヘッダーなど)

1. positionとは?

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

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

2. static(初期値・通常配置)

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

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

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

3. relative(元の位置を基準にずらす)

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

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

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

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

4. 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との大きな違いです。

👉 要素の重なり順を制御するz-indexについての記事はこちら

5. fixed(画面を基準に固定する)

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

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

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

6. sticky(途中まではstatic、途中からfixed)

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

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

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

7. position値の早見表

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

8. まとめ

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

• static:通常配置(初期値)。座標指定は効かない
• relative:元の位置を基準にずらす。absoluteの基準にもなる
• absolute:relative等が指定された親要素を基準に配置
• fixed:画面(ビューポート)を基準に固定
• sticky:普段はstatic、特定位置からfixedのように固定

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