【CSS】position: fixedがどうしても効かない場合に疑うこと
2021/02/02
PCは通常メニュー、レスポンシブではドロワー、というケースで制作する機会も多いはず。
いつもならposition:fixedでハンバーガーメニューは固定できるはずなのに、どうしても親要素に引っ張られてスクロールしてしまう。
親要素のpositionもstaticにしてみたりabsoluteにしてみたり、そもそも指定を外したり。そんなことを永遠にやってもうまくいかず、htmlの構造を変えてみても結局思ったような形にならない。。。プギャーっていう方もここにたどり着いたかも。
原因は親要素にあり
ググってみるとtransformを指定していると効かない、というのがほとんどでしたが、僕の場合はtransformも使ってないし一体どういうこと？ってことで数時間悩んだ次第です。
で、出た結論が
filter:drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.2));このfilterが邪魔してました。なんで？
PCではメニューを影付きのエリア内で実装していてその中にメニューを格納してました。でもスマホではそのエリアから独立させたかったんです。
で、親要素に指定していた影を無効にしたところ、なぜかposition:fixedが通常の動きになりました！！
意味不明～～～
まとめ
とにかくposition:fixedがうまくいかん！というときは親要素のややこしそうな指定を一旦解除してみてください。
では楽しいCSSライフを！
