position:fixedが効かない場合の対処法について

最近、Webサイトを制作していた中で、また、はまった事象に遭遇しましたので、さっそくブログに掲載しておきます。

CSS「position:fixed」についてです。

ヘッダーのメニュー表示を、ブラウザのウィンドウ上部に固定したり、また、ブラウザのウィンドウ下部の固定した箇所に、お問い合わせや予約ボタンを配置したりと、ブラウザのウィンドウ内の固定した位置に、要素を設置する際に便利な「position:fixed」ですが、今回、この「position:fixed」が効かない事象に遭遇しました。

せっかくなので、原因と対処方法について記載させて頂きます。

position:fixedが効かない原因

結論：親要素に transform を指定すると、子要素の position:fixed は効かなくなります。

今回の事象の発生したCSSのソースは以下となっていました。

確かに、親要素に、transformを使っています。

最終的には、意味の無くなってしまった残骸として、transform が親要素に残っていました。
position:fixed が効かないので、ずっと子要素の方ばかり確認していましたが、原因は親要素でした。

そのため、この親要素の transform を削除したところ、問題なく、position:fixed が効き、目的のヘッダーの配置が可能となりました。

position:fixedが効かない原因を調べて見た。

どうやら、親要素に transform が入っていると、子要素の表示範囲がウィンドウ全体ではなく、親要素の範囲になるため親要素がスクロールされると子要素もスクロールされる事象のようです。

(position:fixedを記載しても固定位置にならない。)

ネットで検索すると、確かに同じ事象に遭遇している方がいらっしゃるようでした。

なぜ、transform が親要素に入っていると、子要素のposition:fixedが、効かなくなるのか調べて見ましたが、残念ながら不明でした。

ただ、Chromeだけでなく、Edgeや、その他のブラウザなどでも本事象が確認できたことから、ブラウザのバグではなく、CSSの仕様バグではないかと個人的には思っています。間違っていたらすいません。

(何か理由はあるかもしれませんが、親要素のtransformで子要素のposition:fixedが効かなくなるのは個人的には、やはり仕様バグではと言わざる負えません。)

position:fixedが効かない場合の対処方法

親要素で transform を使わなければ解決します。

どうしても、親要素に transform を使っているような場合には、代替え手段で検討し、実装する必要があります。