淡入jquery图像与我的固定标题重叠

这是jquery

<script type="text/javascript">
    $(document).ready(function () {
        $('#showhidetarget').hide();

        $('a#showhidetrigger').click(function () {
            $('#showhidetarget').toggle(150);
        });
    });
</script>

导航Html

  <div id="nav"><ul>
         <li><a href="#home">HOME</a></li>
         <li><a href="#about">ABOUT</a></li>
         <li><a href="#portfolio">PORTFOLIO</a></li>
         <li><a href="#contact">CONTACT</a></li>
  </ul>
  </div>

---

因此，基本上，我的淡入淡出jquery图像在固定导航条的前面重叠。如何修复此问题，使其不会重叠

您现在了解css属性“z-index”了吗？ z索引控件，其元素将显示在顶部。z索引较大的元素将与z索引较低的元素重叠

因此，将标题的z索引设置为999：

#nav {
    z-index: 999;
}

下面是图像的z索引

---

希望这会有所帮助。

为导航栏和fadeIn对象提供z索引

对于exmaple，确保导航栏具有更高的z索引

.fade {
   opacity: 0.5;
   transition: opacity .50s ease-in;
   -moz-transition: opacity .50s ease-in;
   -webkit-transition: opacity .50s ease-in;
   z-index: 10;
   }

#nav {
    background-color: #001f22;
    height: 30px;
    width: 100%;
    position: fixed;
    list-style-type: none;
    margin-top: 0px;
    margin-bottom: 0;
    float: left;
    margin-right: auto;
    margin-left: auto;
    z-index: 20;
}

---

仅当要应用的元素位于相对、绝对或固定位置且为“显示：内联块”或“显示：块”时，z索引才起作用。如果您的图像现在未定位，请使用不会移动图像的位置：相对，而不是例如位置：绝对；没问题，享受编码。

#nav {
    z-index: 999;
}

.fade {
   opacity: 0.5;
   transition: opacity .50s ease-in;
   -moz-transition: opacity .50s ease-in;
   -webkit-transition: opacity .50s ease-in;
   z-index: 10;
   }

#nav {
    background-color: #001f22;
    height: 30px;
    width: 100%;
    position: fixed;
    list-style-type: none;
    margin-top: 0px;
    margin-bottom: 0;
    float: left;
    margin-right: auto;
    margin-left: auto;
    z-index: 20;
}