目次
- CSSのpositionが効かないとは？
- positionの基本をおさらい
- よくある原因1：positionがstaticのまま
- 対処法
- よくある原因2：top・leftはrelative以上でないと効かない
- よくある原因3：absoluteの基準となる親要素がない
- 対処法
- よくある原因4：absoluteでレイアウトから外れている
- 対処法
- よくある原因5：fixedが効かない（スマホで多い）
- 対処法
- よくある原因6：stickyが効かない
- 正しい指定例
- よくある原因7：z-indexが効かない
- 対処法
- positionが効かないときのチェックリスト
- まとめ：positionが効かないのは仕様を知らないだけ
CSSのpositionが効かないとは？
CSSでレイアウト調整をしていると、
- positionを指定したのに動かない
- topやleftを指定しても位置が変わらない
- absoluteにしたら消えたように見える
といった「positionが効かない」問題に必ず直面します。
これはバグではなく、CSSの仕様を正しく理解できていないことが原因です。
この記事では、初心者の方でも理解できるように
positionが効かない代表的な原因と対処法を順番に解説します。
positionの基本をおさらい
まず、positionには以下の種類があります。
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;重要なのは、初期値は static という点です。
.box {
top: 20px; /* staticのままだと効かない */
}よくある原因1：positionがstaticのまま
positionが指定されていない場合、要素は static です。
.box {
top: 20px; /* 効かない */
}対処法
必ず position を指定します。
.box {
position: relative;
top: 20px;
}よくある原因2：top・leftはrelative以上でないと効かない
top / right / bottom / left は、
- relative
- absolute
- fixed
- sticky
でしか効きません。
.box {
position: static;
left: 30px; /* 効かない */
}よくある原因3：absoluteの基準となる親要素がない
absoluteは、positionが指定された親要素を基準に配置されます。
.child {
position: absolute;
top: 0;
}親に position がない場合、
画面全体（body）を基準に配置されます。
対処法
親要素に position: relative を指定します。
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
}よくある原因4：absoluteでレイアウトから外れている
absoluteを指定すると、要素は通常のレイアウトから外れます。
その結果、
- 要素が重なる
- 見えなくなったように感じる
という状態になります。
.box {
position: absolute;
}対処法
- relativeで済むならabsoluteを使わない
- z-indexを指定する
.box {
position: absolute;
z-index: 10;
}よくある原因5：fixedが効かない（スマホで多い）
スマホブラウザでは、fixedが期待通りに動かないことがあります。
.header {
position: fixed;
top: 0;
}対処法
- viewport設定を確認する
- iOS特有の挙動を理解する
- 必要なら sticky を検討する
.header {
position: sticky;
top: 0;
}よくある原因6：stickyが効かない
stickyは条件が厳しいです。
効かない主な原因は以下です。
- topが指定されていない
- 親要素に overflow: hidden がある
- 親要素の高さが足りない
.box {
position: sticky;
}正しい指定例
.box {
position: sticky;
top: 0;
}よくある原因7：z-indexが効かない
z-indexは、positionが指定されていないと効きません。
.box {
z-index: 100; /* 効かない */
}対処法
.box {
position: relative;
z-index: 100;
}positionが効かないときのチェックリスト
困ったときは、次を順番に確認してください。
- positionは指定されているか
- staticのままではないか
- 親要素にpositionがあるか
- absoluteでレイアウトから外れていないか
- stickyの条件を満たしているか
- z-indexとpositionの関係は正しいか
まとめ：positionが効かないのは仕様を知らないだけ
CSSのpositionはとても強力ですが、
ルールを理解せずに使うと「効かない」と感じやすいプロパティです。
ポイントは次の3つです。
- topやleftはpositionとセット
- absoluteは親要素が重要
- stickyやfixedは条件がある
これらを理解すれば、
positionで悩む時間は一気に減ります。
ぜひ、実装や学習に役立ててください。