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

2014.06.13 2023.06.07 HP制作

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

キーボードの配列

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

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

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

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

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

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

ちなみにz-indexは定義する要素のpositionプロパティに「relative」や「absolute」などの値を設定していないと動作しないので合わせて確認しましょう（positionを設定しないと「static」が適用されるため、定義しないと×）。

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

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

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で固定しています。

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