CSSでposition:fixedが効かないと言うことが時々ある。
そういった場合、ネットで調べると「親要素にtransformがかかっている」という例が多い。
しかし、その他にもFilter系をかけると効かないということがわかったのでメモ。

親要素にbackdrop-filterがかかっているとposition:fixedが効かない件

CSSでできることが増えてきて、いい感じのデザインができる様になった。
最近の流行りの中に「glassmorphism」というのがあるが、
すりガラス上のデザインにするもので、
CSSで実現する際「backdrop-filter：blur(XXpx);」を多用する。

引用：https://www.pinterest.jp/search/pins/?rs=ac&len=2&q=glassmorphism&eq=glassmo&etslf=11911

しかしこれを使うと、小要素にposition:fixedをした際、
Chrome系のブラウザやFirefoxにおいてposition:fixedが効かないことがわかった。
これを避けるには、親要素からbackdrop-filterをなくすしかない。

ちなみにSafariだとちゃんと効く。

filterがかかっていてもposition:fixedが効かない件

続いて、filter。
これも同様で、filterをかけると小要素にposition:fixedが効かない。
同じくChrome系のブラウザやFirefoxで起きていて、Safariは問題ない。

#まとめ
ということでまとめ。
現状起きていることとして以下の条件だとposition:fixedが効かない。

• 親要素にtransformがかかっている
• 親要素にbackdrop-filterがかかっている
• 親要素にfilterがかかっている

避けるためには、これらのCSSを外すしかない。

今後バグとして修正されるかもしれないので、修正されたらこの記事は閉じます。

以下、検証用にCodePen作成しました。
Chrome、Safariなどで切り替えてご確認ください。
https://codepen.io/joh_luck/pen/poOepGR