浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【CSS】要素に指定した position: fixed が効かない時の対処法

そこまで長時間悩んだわけではないのですが、ちょっぴりハマったのでご紹介。

とある要素に、下記のようにCSSを指定していたのですが、スクロールした際に、親要素の下部にくっついて動くような挙動になってしまいました。

position: fixed;
bottom: 0;
left: 0;

本来は画面の下部にくっついて動かないでいてほしかったのですが、気が付けばページ自体に追従する形になっており、そこそこ慌てました。
が、親要素を確認しても、特に変な記述は見つからず…。

 

で、色々調べてみたところ、bodyに指定した下記のCSSが原因でした。

transform: translateZ(0);

親要素ばかりみていたので、これは盲点でした。

どうやら、子要素に position: fixed を指定した時、親要素に transform が指定されていると、position: fixed が希望した通りの挙動をしてくれなくなるみたいでした。

対処法としては、body に指定した transform を削除するか、下記のように !important を用いて無理矢理上書きするかですね。

// transform: translateZ(0);
// transform を解除

transform: none !important;
// !important を使って none で強制的に上書き

力業感が否めませんが…正常に動くようになったので、今回はこれで問題なしということにしておきます。

position を指定した要素の挙動がおかしくなった場合は、親要素もしくは body に transform が指定されていないか確認してみてください。

  • この記事いいね! (3)