「position: fixed;を使って画面に固定したいのになぜかできない…absoluteみたいな配置になってしまう」という現象でハマりました…
というわけで、position: fixedが効かない原因と対処法を紹介します。
position: fixedが効かない原因
親要素にtransformを指定していませんか？
親要素にtransformを指定しているとposition: fixed;を指定しても背景画像が固定されず、表示が崩れます。こいつが原因ですね。
特に<body>にtransform: translate3d(0, 0, 0);を指定してる人（もしくはtransform: translateZ(0);）や、ハンバーガメニュー、モーダルなどを実装しようとしている人は注意しましょう。
jQueryで色々操作していると案外気づかなかったりしますからね。これ結構ハマりポイントです（特にネットから拾ってきたコード使ってる人！）
position: fixedが効かない場合の対処法
親要素のtransformを外せばokです。
transformを外せない人は、position: fixed;にしたい要素をbody直下に移動させるのがいいと思います。
<body>
<!-- この辺や -->
<!-- この辺に移動させればok -->
</body>
言ってしまえばposition: fixed;で表示したい要素なんてHTMLのどこに書いても大して変わらないので、「どうしてもtransformを使いたい…！」という場合はposition: fixed;にしたい要素をできるだけ外側にマークアップしちゃいましょう。
多分これが一番いい解決法だと思います。
まとめ
position: fixed;は簡単に要素を固定表示にできますが、親要素にtransformがかかっている場合は効かないなんて事前に知らないと回避できないですからね…。
今回ハマってしまった人は次回から気をつけるようにしたいですね。
