CSSのposition:fixedは、ページ上部にグローバルメニューを追従させたい時やモーダルウィンドウで中央に固定表示させるなど様々な場面で活躍する便利なプロパティですが、ある条件下で使用すると固定されない現象が起きます。
こちらの記事では、position:fixedを設定している状態で固定・追従しない原因と対処法について解説します。
HTML/CSSの学習におすすめ書籍
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
メリット
- HTMLとCSSの基本が体系的に学べる
- Webデザインの基本が学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
全プログラマー必見！
変数名/関数名にもう悩まない！
変数名/関数名にもう悩まない！
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 （2023/07/23 02:48時点 | Amazon調べ）
ポチップ
目次
position:fixedが効かない原因
結論から話しますと、先祖・親要素に「transform」が設定されていることがposition:fixedが効かない原因になります。
近年のwebサイトでは、アニメーションを使うことが多くなっているためtransformプロパティを使う機会が増えこの現象にハマる人も多いのではないでしょうか。作成したコードを見返して、先祖・親要素に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;
}
