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

Question

这是jquery

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

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

这是我的粘性标题导航 CSS

#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;

导航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>

淡入 CSS

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

   .fade:hover {
    opacity: 1;
      }

   .fade:visited {
    opacity: 1;

      }

所以基本上，我的淡入/淡出 jquery 图像重叠/在前面，固定导航栏。我该如何解决这个问题，使其不重叠？

Answer 1

给 NAV 条一个 z-index 并给 fad​​eIn 对象。

确保 NAV 条具有更高的 z-index，例如。

.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;
}

Answer 2

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

因此设置标题的 z-index，例如到 999：

#nav {
    z-index: 999;
}

以及图像的 z-index 到下面的东西。

希望对您有所帮助。