【CSS】「fixedで固定されない⁉」を速攻解決する方法！

固定させたい要素「header」とかロゴやドロワーメニューに「position:fixed」したのに固定されない時の解決方法のご紹介です。

親要素に「transform: translate3d(0,0,0)」を指定してる！

親要素に「transform: translate3d(0,0,0)」を指定している場合「fixed」が効かなくなる現象があります。「transform: translate3d(0,0,0)」はアニメーションを滑らかにする為に書いていて、実際僕も固定したはずの「header」が固定されず、「absolute」を指定していたかのような挙動をしていて「？」となりました。
解決方法は、親要素の「transform: translate3d(0,0,0)」を削除して、固定したい要素以外に「transform: translate3d(0,0,0)」を付ければ解決！
例えば、「header」以外に「transform: translate3d(0,0,0)」を指定する場合。

body >:not(header) {transform: translate3d(0,0,0);}
// 「header」以外に複数を除外する場合「,」区切りで指定
body >:not(header, .demo, main, footer) {transform: translate3d(0,0,0);}