jquery - z-index 导致附近的按钮出现问题......但我需要它

Question

我有一个菜单的 div 容器，简单的例子:

          <div class="nav-container">
            <div id="corp-crumb">
                <ul class="vertlist" id="ulTop">
                    <li class="crumblink submenu"><a id="createNewLink" href="#" title="Create New" class="crumblink">Create New</a>
                         <ul>
                            <li><a href="/Views/Company/Create.aspx" title="Company">Company</a></li>
                            <li><a href="/Views/Contact/Create.aspx" title="Contact">Contact</a></li>
                             <li><a href="/Views/Corporate/Create.aspx" title="Corporate Group">Corp. Group</a></li>
                             <li><a href="/Views/Issue/Create.aspx" title="Issue">Issue</a></li>
                            <li><a href="/Views/Program/Create.aspx" title="Program">Program</a></li>
                            <li><a href="/Views/Project/Create.aspx" title="Project">Project</a></li>
                            <li><a href="/Views/SubProject/Create.aspx" title="Sub Project">Sub Project</a></li>
                        </ul>
                    </li>
                 </ul>
             </div>
          </div>

这个菜单位于我所有页面的顶部，当用户滚动页面时，我通过 jquery 确保菜单仍然可见，效果如下:

            var nav = $('.nav-container');
            var cc = $("#corp-crumb");

            $(window).scroll(function () {
                marginTop = ($(document).scrollTop() - scroll) + marginTop;
                scroll = $(document).scrollTop();
                if ($(this).scrollTop() > 50) {
                    nav.addClass("f-nav");
                    cc.addClass("addShadow");
                } else {
                    nav.removeClass("f-nav");
                    cc.removeClass("addShadow");
                }
            });

这基本上是说，如果用户滚动，则将类“f-nav”添加到 div 导航，即上面显示的 nav-container。 f-nav 类具有以下定义:

.f-nav {
     z-index: 9999; 
     position: fixed; 
     left: 10px; 
     top: 0; 
     width: 100%;
} /* this make our menu fixed top */

如果用户滚动回顶部，我们将删除此类，如 jquery else 条件所示。这工作正常......但是当有人靠近说我页面上的一些按钮时，z-index 导致用户无法点击按钮，例如在这个屏幕截图中:

在 chrome 开发者工具中，如果我取消选中 z-index，我现在可以点击一个按钮，但是我的菜单会发送到页面后面，如下所示:

是否有一些神奇的 CSS 可以避免这种情况发生？我不确定为什么会导致此问题...

Answer 1

我会说你的导航比它应该的更高。它下方有一个透明空间覆盖了其他按钮。这可以是导航链接上的任何边距或填充。由于我们没有所有代码，所以很难说出到底出了什么问题。

尝试为 f-nav 添加高度。

.f-nav {
  z-index: 9999; 
  position: fixed; 
  left: 10px; 
  top: 0; 
  width: 100%;
  height: 20px; /* Limit the height */
  overflow: hidden; /* Make sure no content overflows */
}