orange-275977_1280

「position: fixed;」で表示位置を常に固定したつもりが全く固定されず。
こんな時は親要素(親の親かも)に「transform」が指定されている可能性が大です。

今回の現象は、よく画面右下にある「最上部へ戻る」的なアイコンが出ていないことで気が付きました。

いろいろと探ったところ、どうやら親要素に指定された「transform」が原因で固定されるはずの「最上部へ戻る」的なアイコンが固定されず自由に動いていました。

ちなみに、親要素に「transform」を指定していた理由は、スマホサイト用のメニューを横スライド形式にするためでした。
メニューのスライドインと同時にコンテンツ全体をスライドアウトにするよう「transform: translateX(0px);」を指定したのが原因です。
スライドのアニメーションをスムーズにするために良かれと思ってわざわざ記述していましたが、消しても問題なくスムーズでした。

とにかく、positionがfixedされない場合はtransformを疑ってください。