【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

【CSS】position:fixedが効かない原因と対処法

CSSのposition:fixedは、ページ上部にグローバルメニューを追従させたい時やモーダルウィンドウで中央に固定表示させるなど様々な場面で活躍する便利なプロパティですが、ある条件下で使用すると固定されない現象が起きます。

こちらの記事では、position:fixedを設定している状態で固定・追従しない原因と対処法について解説します。

HTML/CSSの学習におすすめ書籍
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
総合評価
( 5 )
メリット
  • HTMLとCSSの基本が体系的に学べる
  • Webデザインの基本が学べる
  • 1つのWebサイトを作りながら学べる
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次

position:fixedが効かない原因

結論から話しますと、先祖・親要素に「transform」が設定されていることがposition:fixedが効かない原因になります。

近年のwebサイトでは、アニメーションを使うことが多くなっているためtransformプロパティを使う機会が増えこの現象にハマる人も多いのではないでしょうか。作成したコードを見返して、先祖・親要素にtransformが設定されているか確認しましょう。

ハンバーガーメニューやモーダルウィンドウなどを実装しているサイトは、bodyタグにtransformが使われている可能性が高いです。

先輩くん

position:fixedが効かないコードは以下のとおりです。

<body>
  <div> <!-- transformを設定 -->
    <p>このテキストを追従させたい!</p> <!-- position:fixedを設定 -->
  </div>
</body>
body{
  height:1000px; /* スクロールする高さを設定 */
}

div{
  transform:translate(0,0);
}

p{
  position:fixed;
  bottom:0;
}

position:fixedが効かない時の対処法

position:fixedが効かない時の対処法は以下の2つが挙げられます。

  • transformを外す
  • transformを設定している要素外に移動させる

transformを外してもページレイアウトやアニメーションに影響が出ない場合は①の対処法を選び、影響が出る場合は②の対処法を選ぶことをおすすめします。

先輩くん

先ほど紹介したposition:fixedが効かないコードを正常に動作するよう修正を加えた結果が以下のとおりです。

<body>
  <div></div>
  <p>このテキストを追従させたい!</p> <!-- transformが設定されている要素外に移動 -->
</body>
/* CSSの変更はなし */
body{
  height:1000px;
}

div{
  transform:translate(0,0);
}

p{
  position:fixed;
  bottom:0;
}

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次