CSS positionの違いを完全解説｜relative・absolute・fixed・stickyとは？

CSSでレイアウトを作っていると、position を使う場面は非常に多くあります。
しかし、

• absolute が思った位置に配置されない
• fixed を使ったら画面に張り付いた
• sticky が効かない
• z-index が効かない

など、position はつまずきやすいポイントでもあります。

この記事では、CSSの position の種類と違いを、実際の使用例を交えながらわかりやすく解説します。

positionとは？

position は、要素の配置方法を決めるCSSプロパティです。

position: static;

のように指定します。

positionには主に以下の種類があります。

1. static（初期値）

position: static;

通常のHTMLの流れ通りに配置される状態です。

<div class="box">BOX</div>

.box {
  position: static;
}

何も指定していない状態が static です。

特徴

• top
• left
• right
• bottom

が効きません。

2. relative

position: relative;

元々ある位置を基準に移動します。

.box {
  position: relative;
  top: 20px;
  left: 30px;
}

ポイント

relativeは「元の位置」が残ったまま移動します。

つまり、

• 見た目だけ移動
• 元のスペースは保持される

という特徴があります。

よくある用途

absolute の基準親にする

実務ではこれが非常に重要です。

.parent {
  position: relative;
}

.child {
  position: absolute;
}

3. absolute

position: absolute;

最も混乱しやすいのがこれです。

absoluteは、

「positionが指定された親要素」を基準に配置されます。

基本例

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  position: relative;
  width: 300px;
  height: 300px;
}

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

この場合、右上に配置されます。

なぜ relative が必要？

親に position: relative; がない場合、

position: absolute;

は画面全体を基準にしてしまいます。

これが初心者がよくハマるポイントです。

absolute の特徴

• 通常のレイアウトから外れる
• 他要素の影響を受けにくい
• 重ね表示しやすい

よくある使用例

• ボタン上のアイコン
• 画像上のテキスト
• モーダル
• バッジ表示

4. fixed

position: fixed;

画面そのものを基準に固定されます。

.header {
  position: fixed;
  top: 0;
}

特徴

スクロールしても位置が変わりません。

よくある使用例

• 固定ヘッダー
• 追従メニュー
• ページトップボタン

注意点

fixedは通常レイアウトから外れるため、

padding-top

などで余白調整が必要になる場合があります。

5. sticky

position: sticky;

通常時は普通に表示され、
一定位置までスクロールすると固定されます。

.menu {
  position: sticky;
  top: 0;
}

sticky の特徴

• relative と fixed の中間のような動き
• スクロール時だけ固定

よくある使用例

• 固定ナビ
• 目次
• サイドメニュー

sticky が効かない原因

かなり多いです。

よくある原因：

• 親要素に overflow: hidden;
• top が指定されていない
• 親要素の高さ不足

z-indexとの関係

positionを使うと、z-index を使う場面も増えます。

.modal {
  position: fixed;
  z-index: 999;
}

z-indexとは？

要素の重なり順を指定します。

数字が大きいほど前面に表示されます。

positionの使い分けまとめ