HTML/CSS

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

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

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

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

参考書が苦手な人はUdemyの動画がおすすめ
ちゃんと学ぶ、HTML+CSS&JavaScript入門講座

動画情報
作成者たにぐち まこと
学習時間9時間
受講者数43,706人
レビュー (9,232件)
動画の詳細はこちら

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つが挙げられます。

  1. transformを外す
  2. 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アクセスランキング にほんブログ村