ネットで話題のニュースを紹介

CSSの「z-index」が効かない時の解決方法

先日ブログのカテゴリメニューをページスクロールで追従するよう変更したのですが、一部のブラウザでメニューが記事の下に隠れてしまう現象にハマりました。

MBAコマンドボタン

cssのz-indexが原因ということはすぐにわかりましたが、いくら数値を変えても変化なし。このような現象が起きた場合の解決方法を紹介します。

CSSでz-indexが効かない時の解決方法

z-indexは要素の重なり順序を定義するプロパティです。

LINK:z-index~スタイルシートリファレンス

z-indexの値が大きいものほど上に表示されるのですが、値を変更しても変わらない場合は親要素のpositionプロパティを「static」に変更します。

これでz-indexが正常に機能するようになるはずです。

おまけ:スクロールでついてくるメニュー

当ブログで実装したスクロールでついてくるメニューのソースも紹介します。

jQuery

Html

css

jQueryで位置の取得とクラスを付与してcssで固定しています。

参考サイト:ページ途中にあるグローバルナビなどをスクロール時にトップに固定する

関連する記事

コメント

※コメントは承認制のためすぐには反映されません。