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");
                }
            });

这基本上说如果用户滚动添加类＆＃34; f-nav＆＃34;到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导致用户无法点击按钮，例如在此屏幕截图中显示：

enter image description here

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

enter image description here

是否有一些神奇的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）而不是底层按钮。

您可以通过将菜单阴影替换为纯色done by others来测试是否是这种情况。或者通过删除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值，导致按钮保持在它下面并且无法访问，我相信。

z-index引起附近按钮的问题......但我需要它

5 个答案: