【CSS】position: fixedが効かない場合の原因と対処法

サムネイル CSS

position: fixed;を使って画面に固定したいのになぜかできない…absoluteみたいな配置になってしまう」という現象でハマりました…

というわけで、position: fixedが効かない原因と対処法を紹介します。

 

スポンサーリンク

position: fixedが効かない原因

親要素にtransformを指定していませんか?

親要素にtransformを指定しているとposition: fixed;を指定しても背景画像が固定されず、表示が崩れます。こいつが原因ですね。

 

特に<body>transform: translate3d(0, 0, 0);を指定してる人や、ハンバーガメニュー、モーダルなどを実装しようとしている人は注意しましょう。

jQueryで色々操作していると案外気づかなかったりしますからね。これ結構ハマりポイントです(特にネットから拾ってきたコード使ってる人!)

 

position: fixedが効かない場合の対処法

親要素のtransformを外せばokです。

transformを外せない人は、position: fixed;にしたい要素をHTMLの外側に移動させるのがいいと思います。

言ってしまえばposition: fixed;で表示したい要素なんてHTMLのどこに書いても大して変わらないので、「どうしてもtransformを使いたい…!」という場合はposition: fixed;にしたい要素をできるだけ外側にマークアップしちゃいましょう。

多分これが一番いい解決法だと思います。

 

まとめ

position: fixed;は簡単に要素を固定表示にできますが、親要素にtransformがかかっている場合は効かないなんて事前に知らないと回避できないですからね…。

今回ハマってしまった人は次回から気をつけるようにしたいですね。