みかづきブログ・カスタム

基本的にはちょちょいのほいです。

親にtranslate3dやfilterを掛けるとposition: fixedが効かなくなる 😱


DEMO

develop.kimizuka.org


position: fixedを掛けた要素の親に、

transform: translate3d(0, 0, 0);

や、

filter: blur(0);

を指定すると効かなくなり、position: relative指定時の位置を取るようになります。
色々試してみましたが、対策は無くて、translate3dやfilterは親ではなく自分自身や子要素に掛けるようにするしかなさそうです。
translate3dは知っていたのですが、filterは初めて出会しました。