ブログBlog

最近、Webサイトを制作していた中で、また、はまった事象に遭遇しましたので、さっそくブログに掲載しておきます。

CSS「position:fixed」についてです。

ヘッダーのメニュー表示を、ブラウザのウィンドウ上部に固定したり、また、ブラウザのウィンドウ下部の固定した箇所に、お問い合わせや予約ボタンを配置したりと、ブラウザのウィンドウ内の固定した位置に、要素を設置する際に便利な「position:fixed」ですが、今回、この「position:fixed」が効かない事象に遭遇しました。

せっかくなので、原因と対処方法について記載させて頂きます。

position:fixedが効かない原因

結論:親要素に transform を指定すると、子要素の position:fixed は効かなくなります。

今回の事象の発生したCSSのソースは以下となっていました。

 

確かに、親要素に、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サイト運用管理サービス(保守)」と組み合わせて購入しますと、メンテナンス、更新も含めてすべて弊社で実施しますので、お客様は安心して本業に集中する事ができます。

しかもなんと、「全てお任せ!ホームページ制作」は、¥99,800!で提供しております。

本業が忙しい中小企業様に大変ご好評を頂いている商品です。

  • 独自ドメイン取得

    独自ドメイン取得

  • サーバー開設&設定

    サーバー開設&設定

  • レイアウト設計

    レイアウト設計

  • レスポンシブルデザイン

    レスポンシブルデザイン
    (*1)

  • 検索エンジン最適化(SEO対策)

    検索エンジン最適化
    (SEO対策)

  • 場所Maps

    場所Maps

  • お問い合わせフォーム

    お問い合わせフォーム

  • SSL化

    SSL化

  • 各種SNS連携

    各種SNS連携

  • 運用マニュアル

    運用マニュアル

≫詳細はこちら

MENU