---
title: "CSSのpositionとは？static・relative・absolute・fixedの違い"
description: "要素を思い通りの場所に置けずに困っているなら、positionの値ごとに「何を基準に動くか」が変わる点を押さえると解決します。static・relative・absolute・fixedの挙動の違いを実例で整理します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/css-position-term"
markdown: "https://giga-site.com/articles/css-position-term/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# CSSのpositionとは？static・relative・absolute・fixedの違い

要素を自由な位置に置きたい、ヘッダーを画面上部に固定したい。そんなときに使うのがpositionです。値によって配置の基準が切り替わり、挙動が大きく変わります。代表的な四つの値の違いを理解して、配置を思い通りに操りましょう。

> Source HTML: https://giga-site.com/articles/css-position-term
> Article index: https://giga-site.com/articles/index.md

## positionとは何か

positionは、要素をどの基準にもとづいて配置するかを決めるCSSのプロパティです。値を変えると、通常の流れに沿って並ぶか、特定の基準からずらして置くか、画面に固定するかといった挙動が切り替わります。

あわせて使う上下左右の位置指定と組み合わせることで、要素を基準位置からどれだけずらすかを細かく決められます。positionが基準を、位置指定がずれ幅を担当します。

重なり順を制御するz-indexも、多くの場合positionが指定されていることが前提です。配置と重なりはセットで考えると理解しやすくなります。

## staticとrelativeの違い

staticは初期値で、要素は通常の流れに沿って順番に並びます。この状態では上下左右の位置指定は効きません。何も指定しない普通の配置がstaticだと考えてよいでしょう。

relativeは、要素本来の位置を基準に、そこからずらして配置します。元の場所は確保されたまま見た目だけが移動するため、周囲のレイアウトは崩れにくいのが特徴です。

relativeはそれ自体で大きく動かすより、後述するabsoluteの基準となる親を作る目的でも使われます。控えめなずらしと基準づくりの二役を覚えておくと便利です。

## 実務ではどこで関係する？

positionは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

CSSのpositionとは？static・relative・absolute・fixedについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める

## absoluteとfixedの違い

absoluteは、通常の流れから外れ、位置指定の付いた最も近い親要素を基準に配置されます。基準となる親がなければページ全体が基準になります。重ねて配置するパーツに向きます。

fixedは画面そのものを基準に固定され、スクロールしても位置が変わりません。常に表示しておきたいヘッダーや、画面端のボタンなどに使われます。

どちらも通常の流れから外れるため、元あった場所のスペースは確保されません。周囲の要素が詰まって見えることがあるので、余白の調整が必要になる場合があります。

## 固定ヘッダーを作る手順

スクロールしても上部に残るヘッダーは、positionを使う代表的な例です。次の手順で基本形を作れます。

1. ヘッダー要素にfixedを指定して画面を基準に固定する
2. 上端からの位置を指定して画面の最上部に貼り付ける
3. 横幅を画面いっぱいに広げて隙間が出ないようにする
4. ヘッダーが他の要素の上に来るようz-indexを十分大きくする
5. 本文がヘッダーに隠れないよう、本文側に上方向の余白を足す

## 値を選ぶときの考え方

まず通常の流れに沿わせたいならstatic、本来の位置から少しずらすならrelative、自由に重ねたいならabsolute、画面に固定したいならfixedと、目的から選ぶと迷いません。

absoluteを使うときは、基準にしたい親にrelativeを与えておくのが定石です。基準を意識せずに使うと、意図しない場所に飛んでしまう原因になります。

## 配置の確認を素早く共有する

固定ヘッダーや重ねたパーツは、実際にスクロールして初めて挙動を確認できることが多いものです。試作をチームに見てもらいたいとき、ギガサイト便ならHTMLやZIPをドロップするだけで共有URLを発行でき、その場で動きを確認してもらえます。

同じURLのまま中身を差し替えられるので、配置を微調整するたびにリンクを送り直す必要がありません。確認のやり取りを軽くしたいときに便利です。

## よくある質問

### relativeとabsoluteの違いは何ですか？

relativeは要素本来の位置を基準にずらし、元の場所は確保されます。absoluteは通常の流れから外れ、位置指定の付いた最も近い親を基準に配置されます。元の場所のスペースは確保されない点が大きな違いです。

### fixedとabsoluteはどう使い分けますか？

fixedは画面そのものを基準に固定され、スクロールしても位置が変わりません。absoluteは親要素やページを基準に配置されます。常に画面に残したいならfixed、特定の場所に重ねたいならabsoluteが向きます。

### 上下左右の位置指定が効かないのはなぜですか？

positionが初期値のstaticのままだと、上下左右の位置指定は効きません。relativeやabsolute、fixedなど、static以外の値を指定してから位置を調整してください。

### absoluteで要素が意図しない場所に飛ぶのはなぜですか？

基準にしたい親に位置指定がないと、より外側の要素やページ全体が基準になってしまうためです。重ねたい親要素にrelativeを与えて基準を明示すると、意図した位置に配置できます。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [z-indexとは？要素の重なり順を決めるCSSの基礎](https://giga-site.com/articles/z-index-term/index.md)
- [CSSセレクタとは？要素を狙ってスタイルを当てる基礎](https://giga-site.com/articles/css-selector-term/index.md)
- [詳細度（specificity）とは？CSSが効かない時に確認する優先順位](https://giga-site.com/articles/css-specificity-term/index.md)
- [px・em・rem・%とは？CSSの単位の違いをやさしく解説](https://giga-site.com/articles/css-units-term/index.md)
- [CSSカスタムプロパティ（変数）とは？色やサイズを使い回す仕組み](https://giga-site.com/articles/css-variables-term/index.md)
- [グラデーションとは？CSSで色を滑らかに変化させる基礎](https://giga-site.com/articles/css-gradient-term/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "CSSのpositionとは？static・relative・absolute・fixedの違い",
  "description": "要素を思い通りの場所に置けずに困っているなら、positionの値ごとに「何を基準に動くか」が変わる点を押さえると解決します。static・relative・absolute・fixedの挙動の違いを実例で整理します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/css-position-term",
  "url": "https://giga-site.com/articles/css-position-term",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "relativeとabsoluteの違いは何ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "relativeは要素本来の位置を基準にずらし、元の場所は確保されます。absoluteは通常の流れから外れ、位置指定の付いた最も近い親を基準に配置されます。元の場所のスペースは確保されない点が大きな違いです。"
      }
    },
    {
      "@type": "Question",
      "name": "fixedとabsoluteはどう使い分けますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "fixedは画面そのものを基準に固定され、スクロールしても位置が変わりません。absoluteは親要素やページを基準に配置されます。常に画面に残したいならfixed、特定の場所に重ねたいならabsoluteが向きます。"
      }
    },
    {
      "@type": "Question",
      "name": "上下左右の位置指定が効かないのはなぜですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "positionが初期値のstaticのままだと、上下左右の位置指定は効きません。relativeやabsolute、fixedなど、static以外の値を指定してから位置を調整してください。"
      }
    },
    {
      "@type": "Question",
      "name": "absoluteで要素が意図しない場所に飛ぶのはなぜですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "基準にしたい親に位置指定がないと、より外側の要素やページ全体が基準になってしまうためです。重ねたい親要素にrelativeを与えて基準を明示すると、意図した位置に配置できます。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```