CSSのpositionの違いを超わかりやすく解説

CSS position とは？

position は、要素を どこを基準にして配置するか を決めるプロパティです。
ブラウザは通常、要素を上から順に積み上げて描画しますが、position を使うとこの流れを自在に操作できます。

主な値は以下の5種類です：

• static — デフォルトの配置
• relative — 元の位置からズラす / 子要素の基準を作る
• absolute — 親要素を基準に固定配置
• fixed — 画面に固定
• sticky — スクロールで固定に切り替わる

position: static — デフォルトの状態

特に指定しない状態が static です。要素は文書の通常フローに従って配置され、top や left は効きません。

初心者がやりがちな間違い：

position: static;
top: 10px; /* 動かない */

position: relative — 元の位置を基準に動かす & 子要素の基準を作る

relative の特徴：

1. 元の位置を基準に移動できる（ズラすイメージ）
2. 子要素の absolute 配置の基準点になる

元の位置は残る

relative を指定すると、要素は元の位置にスペースを残したまま表示されます。
周囲の要素への影響が少なく、レイアウトが崩れにくいです。

子要素の absolute の基準になる

実務で多い用途の例：カード右上の「SALE」バッジ。親に relative がないと absolute 要素は画面基準に飛びます。

position: absolute — 親を基準に固定配置

自由度は高いですが、親要素の指定によって表示位置が変わるため注意が必要です。

基準は「一番近い position を持った親」

• 親に relative があれば → その親を基準に配置
• 親に何も指定がなければ → body（画面全体）を基準に配置

元の位置は消え、空間を占有しない

他の要素を押しのけず、自由に浮くように配置されます。

実務での用途

• 商品カードの右上バッジ
• 吹き出しの三角
• ドロップダウンメニュー
• ハンバーガーメニューの展開位置

注意: 親に relative を指定していないと意図した場所に配置されません。

position: fixed — 画面に固定

スクロールしても動かない要素に使用します。固定ヘッダーやチャットボタン、ページトップへのスクロールなどに便利です。

• ビューポート（画面）を基準に配置
• スクロールしても位置が変わらない
• z-index の競合でクリックできなくなる場合がある
• スマホ（特に iOS）ではキーボード表示時に挙動が狂いやすい

position: sticky — スクロールに応じて固定化

通常は static と同じですが、スクロールして指定位置に到達すると fixed のように固定されます。

よくある用途

• スクロールで追従するナビ
• 記事の固定目次
• サイドバーの追従

sticky が効かない3大原因

1. 親要素に overflow: hidden / auto がある
2. 要素や親要素の高さが不足している
3. top の指定がない

まとめ：position を理解すればレイアウトの自由度がアップ

• relative → 基準を作る
• absolute → 基準に対して自由に配置
• fixed → 画面に固定
• sticky → スクロールで固定に切り替わる

違いを理解することで、UI 表現力が格段に向上します。