【CSS】「position: fixed」が使えなくなった時の対処法

グローバルメニューなど、CSSの「position: fixed」で固定したい場合も多いかと思います。
特に設定に誤りがないにも関わらず、「position: fixed」が効かなくなった場合の原因と対処法をメモしておきます。

「position: fixed」が使えない原因

「position: fixed」を指定している要素の、親・先祖要素のCSSに「transform」系の設定をしていることが原因で、「position: fixed」が効かなくなっていました。
親・先祖要素に「transform」系の設定をすると、それ以下の子孫要素は「position: fixed」が効かなくなり、「position: relative」となってしまうようです。

解決策

親・先祖要素のCSS「transform」系の設定を辞めると、「position: fixed」が有効になります。

自分で親・先祖要素のCSS「transform」の設定をしていなくても、プラグインを使用している場合は、そちら側で設定されている可能性があります。

今回「position: fixed」が効かなかった直接の原因は、スマホ用のメニュー表示に使用したJSプラグイン「Slidebars」のCSSが原因でした。
「Slidebars」を有効にするための設定、＜div id=”sb-site”＞内に「position: fixed」を使用したい要素があり、＜div id=”sb-site”＞に「transform」が使用されていました。
取り急ぎ「Slidebars」のCSS「slidebars.css」下部の以下の部分を調整すると、「position: fixed」が有効になりました。

修正前

#sb-site,.sb-site-container,.sb-slide,.sb-slidebar{-webkit-transform:translate(0px);-moz-transform:translate(0px);-o-transform:translate(0px);transform:translate(0px);-webkit-transition:-webkit-transform 400ms ease;-moz-transition:-moz-transform 400ms ease;-o-transition:-o-transform 400ms ease;transition:transform 400ms ease;-webkit-transition-property:-webkit-transform,left,right;-webkit-backface-visibility:hidden}

修正後

「#sb-site,」を削除

.sb-site-container,.sb-slide,.sb-slidebar{-webkit-transform:translate(0px);-moz-transform:translate(0px);-o-transform:translate(0px);transform:translate(0px);-webkit-transition:-webkit-transform 400ms ease;-moz-transition:-moz-transform 400ms ease;-o-transition:-o-transform 400ms ease;transition:transform 400ms ease;-webkit-transition-property:-webkit-transform,left,right;-webkit-backface-visibility:hidden}

参考記事

iPhoneは -webkit-transform: translate… とその子孫に position: fixed; が効かない | WEBdev

情報をありがとうございます！！