导航菜单不会停留在屏幕前方

Question

导航菜单的Java脚本：
  //

  $(function() {
    // Stick the #nav to the top of the window
    var nav = $('#nav');
    var navHomeY = nav.offset().top;
    var isFixed = false;
    var $w = $(window);

   $w.scroll(function() {
    var scrollTop = $w.scrollTop();
    var shouldBeFixed = scrollTop > navHomeY;
    if (shouldBeFixed && !isFixed) {
        nav.css({
            position: 'fixed',
            top: 0,
            left: nav.offset().left,
            width: nav.width()
        });
        isFixed = true;
    }
    else if (!shouldBeFixed && isFixed)
    {
        nav.css({
            position: 'static'
        });
        isFixed = false;
    }
    });

   });

//]]>  

HTML code：

<div> <div class="pic"> <img  class="image" src="logo.jpg"/> </div> </div>  

班级的CSS：

.image{
width: 1000px;
height:800px;

opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
      transition: all 1s ease;
       }
.image:hover {
  width: 1100px;
  height: 900px;
  opacity: 0.9;
filter: alpha(opacity=100); /* For IE8 and earlier */
}




.pic {
 border: 10px solid #fff;  

 height: 800px;
 width: 1000px;
 margin: 20px;
 overflow: hidden;

 -webkit-box-shadow: 5px 5px 5px #111;
      box-shadow: 5px 5px 5px #111;  

}

图像是透明的，在悬停时放大并移除透明度。导航菜单位于顶部并在滚动时移动（使用JavaScript代码）。图像位于导航菜单下方，当悬停在图像导航菜单链接上时，链接变得不可点击。有没有办法将菜单修复到前面？我试过位置：固定;但它不起作用。

Answer 1

将z-index属性添加到#wrap

#wrap {
  z-index: 1;
  ...
}

更新了JSFiddle

Answer 2

在css中使用z-index这里有一些文档https://www.w3schools.com/cssref/pr_pos_z-index.asp希望它能提供帮助

Answer 3

只要保持其他元素的z-index小于1

，这将始终将导航栏设置在winodow中其他元素的上方

.nav{
 z-index: 1;
}