目次
- CSSのpositionが効かないとは？まず一文で
- positionの基本をまず整理する
- 超重要ポイント
- よくある原因①：positionがstaticのまま
- ダメな例
- 正しい書き方
- よくある原因②：absoluteの基準が間違っている
- 例
- 正解パターン
- なぜ親にrelativeを付けるのか？
- よくある原因③：absoluteで消えたように見える
- 対処
- よくある原因④：z-indexが効かない
- ダメな例
- 正解
- よくある原因⑤：stickyが効かない
- よくあるミス
- 必須条件
- よくある原因⑥：fixedが効かない（スマホ）
- 代替案
- 横スクロール問題とpositionの関係
- DevToolsで確認する具体手順
- position別の正しい使い分け
- relative
- absolute
- fixed
- sticky
- 実務でよくある失敗談
- positionが効かないときのチェックリスト
- まとめ：positionは「基準」を理解すれば怖くない
CSSのpositionが効かないとは？まず一文で
positionが効かないと感じる原因のほとんどは、「基準」と「条件」を知らないことです。
- topを指定したのに動かない
- absoluteにしたら消えた
- stickyが効かない
- z-indexが無視される
これ、全部よくある話です。
バグではありません。
仕組みを知らないだけです。
positionの基本をまず整理する
positionには5種類あります。
position: static; /* 初期値 */
position: relative;
position: absolute;
position: fixed;
position: sticky;超重要ポイント
初期値は static。
staticのままでは、topやleftは効きません。
よくある原因①：positionがstaticのまま
ダメな例
.box {
top: 20px;
}動きません。
正しい書き方
.box {
position: relative;
top: 20px;
}top・leftは必ずpositionとセットです。
よくある原因②：absoluteの基準が間違っている
absoluteは「一番近いposition付き親」を基準にします。
例
.child {
position: absolute;
top: 0;
}親にpositionがないと、
body基準になります。
正解パターン
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
}なぜ親にrelativeを付けるのか？
absoluteは「レイアウトの流れから外れる」性質があります。
つまり、
- 通常配置を無視する
- 基準がないと画面全体基準になる
だから親にrelativeを置きます。
relativeは「基準を作る」役割です。
よくある原因③：absoluteで消えたように見える
absoluteは通常フローから外れます。
その結果：
- 要素が重なる
- 背景の下に隠れる
- 見えなくなったように感じる
対処
.box {
position: absolute;
z-index: 10;
}ただし、z-indexも条件があります。
よくある原因④：z-indexが効かない
z-indexはpositionが指定されていないと効きません。
ダメな例
.box {
z-index: 100;
}正解
.box {
position: relative;
z-index: 100;
}よくある原因⑤：stickyが効かない
stickyは条件が厳しいです。
よくあるミス
.box {
position: sticky;
}これだけでは動きません。
必須条件
.box {
position: sticky;
top: 0;
}さらに、
- 親にoverflow: hiddenがある
- 親の高さが足りない
と効きません。
よくある原因⑥：fixedが効かない（スマホ）
スマホでfixedがズレることがあります。
特にiOS。
原因はビューポートやスクロール仕様。
代替案
.header {
position: sticky;
top: 0;
}stickyのほうが安定することもあります。
横スクロール問題とpositionの関係
absoluteで要素を右に飛ばすと、
.box {
position: absolute;
left: 100%;
}画面外に出て横スクロール発生。
DevToolsでbodyの幅を確認すると、
想定外に広がっていることがあります。
DevToolsで確認する具体手順
- 右クリック → 検証
- 対象要素を選択
- Computedタブでposition確認
- Layoutタブでボックスモデル確認
特に確認するのは：
- positionの値
- 親要素のposition
- overflowの指定
- z-indexの階層
position別の正しい使い分け
relative
- 少し位置をずらす
- absoluteの基準を作る
absolute
- 親内で自由配置
- 重ねるレイアウト
fixed
- 画面固定ヘッダー
- 常に表示するボタン
sticky
- スクロールで固定される要素
実務でよくある失敗談
昔、ヘッダーをabsoluteで固定しました。
.header {
position: absolute;
top: 0;
}一見動く。
でもスクロールで消えました。
正解はfixedでした。
positionは「目的」で選びます。
positionが効かないときのチェックリスト
✔ positionはstaticのままではないか
✔ top / leftをセットで書いているか
✔ absoluteの基準親はあるか
✔ overflowでstickyを邪魔していないか
✔ z-indexにpositionは付いているか
✔ 横スクロールが発生していないか
まとめ：positionは「基準」を理解すれば怖くない
positionが効かないと感じる理由は、
- 基準を知らない
- 条件を知らない
この2つです。
覚えるポイントは3つ。
- topやleftはpositionとセット
- absoluteは親が命
- stickyは条件付き
ここを押さえれば、
positionで詰まる時間は大きく減ります。
焦らず、DevToolsで確認しながら試してください。