"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 */
}

Answer 2

您的导航容器div下面的div需要在顶部填充以防止元素进入您的导航div。

<div class="nav-container">

     <!--Lots of other elements-->

</div><!--closing the nav-container div-->

<div id='div-under-nav'>
     <!--Your div with the buttons that gets into trouble-->
</div>

上面的片段是我对你的情况的假设。 让我们说你的导航容器的高度为30px，然后你的div-under-nav的前30px就在它下面。

修复它在CSS中设置它

#div-under-nav{padding-top: 30px;}

抱歉所有的伪代码，但你没有给我很多工作。

Answer 3

根据图片，可能是由于点击部分半透明阴影层（corp-crumb）而不是底层按钮引起的。

您可以通过将菜单阴影替换为其他人使用的纯色来测试是否是这种情况。 或者通过删除corp-crumb和完全引用它的js位。 这样，当单击菜单阴影层或其下方的按钮时，很容易看到。

Answer 4

您可以使用以下命令来避免.f-nav捕获点击事件： pointer-events:none; ，它不应该影响内部链接。

.f-nav {
     z-index: 9999; 
     position: fixed; 
     left: 10px; 
     top: 0; 
     width: 100%; 
     pointer-events:none; /* avoid this wrapper to catch click events */
} /* this make our menu fixed top */

Answer 5

这是菜单下面的阴影层具有相同的z-index值，导致按钮保持在它下面并且无法到达，我相信。

Answer 6

希望这对有js的人有帮助✌️

onClick={(e) => e.stopPropagation()}