CSSの「z-index」が効かない時

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

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

MBAコマンドボタン

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

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

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

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

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

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

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

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

jQuery

<script type="text/javascript">
jQuery(function($) {
  
var nav    = $('.menu-category-container'),
    offset = nav.offset();
  
$(window).scroll(function () {
  if($(window).scrollTop() > offset.top) {
    nav.addClass('fixed');
  } else {
    nav.removeClass('fixed');
  }
});
  
});
</script>

Html

<nav class="menu-category-container">
<ul id="menu-category" class="menu">
<li><a href="#">Firefox</a></li>
<li><a href="#">iPhone</a></li>
<li><a href="#">サイト制作</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">ニュース</a></li>
<li><a href="#">ネット・PC</a></li>
<li><a href="#">ライフハック</a></li>
<li><a href="#">小ネタ</a></li>
</ul></nav>

css

.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;
}

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

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

関連する記事

コメント