position:fixedが効かない場合の対処法について
最近、Webサイトを制作していた中で、また、はまった事象に遭遇しましたので、さっそくブログに掲載しておきます。
CSS「position:fixed」についてです。
ヘッダーのメニュー表示を、ブラウザのウィンドウ上部に固定したり、また、ブラウザのウィンドウ下部の固定した箇所に、お問い合わせや予約ボタンを配置したりと、ブラウザのウィンドウ内の固定した位置に、要素を設置する際に便利な「position:fixed」ですが、今回、この「position:fixed」が効かない事象に遭遇しました。
せっかくなので、原因と対処方法について記載させて頂きます。
position:fixedが効かない原因
結論:親要素に transform を指定すると、子要素の position:fixed は効かなくなります。
今回の事象の発生したCSSのソースは以下となっていました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .siteheader{ /* ヘッダーmenu 親要素 */ display:block; width:100%; height:var(--tophead-sp-size); background:#fff; position:relative; transform: translate(0, 0); } .siteheader-wrap{ /* ヘッダーmenu 子要素 */ width:100%; height:auto; position:fixed; top:0; left:0; } |
確かに、親要素に、transformを使っています。
最終的には、意味の無くなってしまった残骸として、transform が親要素に残っていました。
position:fixed が効かないので、ずっと子要素の方ばかり確認していましたが、原因は親要素でした。
そのため、この親要素の transform を削除したところ、問題なく、position:fixed が効き、目的のヘッダーの配置が可能となりました。
position:fixedが効かない原因を調べて見た。
どうやら、親要素に transform が入っていると、子要素の表示範囲がウィンドウ全体ではなく、親要素の範囲になるため親要素がスクロールされると子要素もスクロールされる事象のようです。
(position:fixedを記載しても固定位置にならない。)
ネットで検索すると、確かに同じ事象に遭遇している方がいらっしゃるようでした。
なぜ、transform が親要素に入っていると、子要素のposition:fixedが、効かなくなるのか調べて見ましたが、残念ながら不明でした。
ただ、Chromeだけでなく、Edgeや、その他のブラウザなどでも本事象が確認できたことから、ブラウザのバグではなく、CSSの仕様バグではないかと個人的には思っています。間違っていたらすいません。
(何か理由はあるかもしれませんが、親要素のtransformで子要素のposition:fixedが効かなくなるのは個人的には、やはり仕様バグではと言わざる負えません。)
position:fixedが効かない場合の対処方法
親要素で transform を使わなければ解決します。
どうしても、親要素に transform を使っているような場合には、代替え手段で検討し、実装する必要があります。
- タグ
- プログラミング
WEB DESIGN全てお任せ!ホームページ制作
RishunTradingでは、日本にはないコンセプトや高いデザイン性をもったヨーロッパ製品の輸入販売、及び、Webサイト制作事業などをおこなっております。
「全てお任せ!ホームページ制作」は、ドメイン取得からサーバー設定、レスポンシブルデザイン(スマホ、タブレット対応)、SEO対策がすべて含まれたお得なホームページを制作するサービス商品です。
運用開始後に「Webサイト運用管理サービス(保守)」と組み合わせて購入しますと、メンテナンス、更新も含めてすべて弊社で実施しますので、お客様は安心して本業に集中する事ができます。
しかもなんと、「全てお任せ!ホームページ制作」は、¥100,000!で提供しております。
本業が忙しい中小企業様に大変ご好評を頂いている商品です。
独自ドメイン取得
サーバー開設&設定
レイアウト設計
レスポンシブルデザイン
(*1)検索エンジン最適化
(SEO対策)場所Maps
お問い合わせフォーム
SSL化
各種SNS連携
運用マニュアル