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

CSS
この記事は約2分で読めます。
スポンサーリンク

固定させたい要素「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);}
SNSフォローボタン
エンデ・バタローをフォローする
CSSサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました