position: fixed;が効かない理由を暴く

ABOUTこの記事をかいた人

フロントエンドエンジニア。

こんにちは。今回はposition: fixed;が効かない理由とその対処法をまとめていきます。

なぜposition:fixed;が効かないのか | 親要素がtransformしていると効かない

例えばこんなヘッダーを作ろうとしています。こういうヘッダー、コーディングしてると結構出会います。

  • ページ読み込み時にしたからふわっと出てくる
  • グローバルナビがスクロールに追従する

見た目としてはこんな感じです。

さて、これをコーディングすると考えてみます。

まずは見た目はこんな感じでしょう。

アニメーションは以下のような形。

さて、こうするとなんとposition: fixed;を指定しているはずのグローバルナビ部分がスクロールに追従しません(試してみてください)。

これは親要素(今回は.Header)に、アニメーションのためのtransform: translateY(30px)が付与されているからです。

MDNのpositionプロパティのページ(https://developer.mozilla.org/ja/docs/Web/CSS/position)にも、fixedについて以下のように書かれています。

祖先の一つに transform, perspective, filter の何れかのプロパティが none 以外 (CSS Transforms 仕様書を参照) に設定されている場合は例外で、その場合は祖先が包含ブロックとしてふるまいます。

要するに、親要素にtransformなどの指定があるとposition: absolute;と同様の挙動になってしまうのです。

どう対処するか

transform以外の方法が使えるならそちらを使う

今回であれば.Headerと.Navのtopの値を調整すれば実現可能です。それぞれtranslateYを使った時と同様に最初の値を30pxずらします。

これで想定通りの動きになります。

子要素をそれぞれtransformさせる

position: fixed;にしたい要素の親要素にtransformが指定されているのが問題なので、その状態さえ回避すれば良いです。背景とグローバルナビ部分を分け、それぞれをtransformさせます。

これで想定通りの動きになります。

まとめ

というわけで、position: fixed;が効かない理由と、その対処をまとめました。知らないとかなり対処が難しいので、ぜひ参考にしてください。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください