CSS

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

💡 はじめに

Webサイトを作っていると、
「ボタンを右下に固定したい」
「画像を文字の上に重ねたい」
「特定の要素だけ自由に動かしたい」

こんなときに活躍するのが CSSのpositionプロパティ です。

しかし、

「static・relative・absolute・fixed・stickyの違いがわからない！」
という初心者も多いはず。

この記事では、初心者でも理解できるように、
positionの仕組みと使い方を徹底解説します！

positionとは？

positionは、HTML要素の配置位置を制御するCSSプロパティです。

通常、HTMLの要素は上から順に配置されますが、positionを使うと
「自由な位置に配置」「重ねる」「固定する」などが可能になります。

position: 値;

主な値は以下の5つです👇

値説明
staticデフォルトの位置（指定なし）
relative元の位置を基準に相対的に移動
absolute親要素（または最初のposition指定要素）を基準に配置
fixed画面（ビューポート）に固定表示
stickyスクロールに応じて切り替わる「固定＋相対」表示

1. static（デフォルトの位置）

position: static; は初期状態。
特別な指定をしない限り、すべての要素はこの状態です。

div {
  position: static;
}

📘 特徴

  • top, left, bottom, right の指定は無効
  • 通常のHTMLの流れに従って配置

つまり、「特に動かさない」要素です。

2. relative（相対配置）

relativeは元の位置を基準にして相対的に移動します。

div {
  position: relative;
  top: 20px;
  left: 30px;
}

📘 特徴

  • 元の位置を“基準”に移動する
  • 移動しても空間（レイアウト上の元の位置）はそのまま残る

🧭 例：

  • 画像を少し上にずらす
  • ボタンを微調整して位置を合わせる など

3. absolute（絶対配置）

absoluteは、親要素を基準にして絶対的に配置します。
ただし、親要素がposition: relative;やposition: absolute;を持っている必要があります。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  right: 0;
}

📘 特徴

  • 親の相対位置を基準に配置される
  • 通常のレイアウトの流れから外れる（他の要素に影響を与えない）

🧭 例：

  • 画像の上にテキストを重ねたい
  • カードの右上に「NEW!」ラベルを置く

4. fixed（画面に固定）

fixedは、スクロールしても位置が変わらない固定配置です。
画面（ビューポート）全体を基準に配置されます。

.button {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

📘 特徴

  • 画面をスクロールしても常に同じ位置に表示
  • メニュー・「トップへ戻る」ボタンなどに使われる

🧭 例：

  • スマホ画面の下に固定ボタンを配置
  • ヘッダーやナビゲーションを常に上に固定

5. sticky（スクロール連動）

stickyは、relativeとfixedのハイブリッド。
スクロール位置に応じて「固定状態」に切り替わります。

header {
  position: sticky;
  top: 0;
}

📘 特徴

  • 通常はrelativeのように流れに従う
  • スクロールして指定位置に達すると固定される
  • スクロール連動ヘッダーに最適

🧭 例：

  • ヘッダーがスクロールしても画面上部に張り付く
  • サイドバーを一定位置で固定

positionの違いイメージ

[static]   → 通常の流れ
[relative] → 元の位置からずれる
[absolute] → 親を基準に絶対配置
[fixed]    → 画面に固定
[sticky]   → スクロールで固定

positionを使うときの注意点

  1. absoluteは基準を決める！
    　親にposition: relative;を指定しないと、予期せぬ位置に出ることがあります。
  2. z-indexとの組み合わせ
    　要素を重ねたい場合はz-indexを併用しましょう。
    　数値が大きいほど前面に表示されます。
.overlay {
  position: absolute;
  z-index: 10;
}
  1. レスポンシブとの兼ね合いに注意
    　固定位置指定は画面サイズによって崩れやすいため、
    　@mediaクエリと一緒に調整するのがおすすめです。

一覧

値基準特徴主な用途
static通常の流れ位置指定なし基本の配置
relative元の位置相対移動微調整
absolute親要素絶対位置重ねる要素
fixed画面全体スクロール固定ボタン・ヘッダー
stickyスクロール一定位置で固定スクロール連動

まとめ：positionを理解すればデザインが自由になる！

positionを理解すれば、
ヘッダー固定・画像重ね・ボタン配置など、Webデザインの幅が一気に広がります。

最初は難しく感じるかもしれませんが、
実際にrelativeやabsoluteを使って練習してみると、感覚的に理解できるようになります。

ぜひこの記事を参考に、あなたのWebデザインに「動き」と「自由度」をプラスしてみましょう！

-CSS