html css z-index 不工作，我做错了什么？

html css z-index not working, what do I do wrong?

我试图让 2 个 div 完全重叠：一个 div 用于菜单控制器，一个 div 用于菜单。菜单控制器将捕获所有鼠标事件，使菜单 div 消失，等等。我已经解决了大部分问题，但我无法将控制器 div 置于菜单 div 之上。为了检查定位，我更改了控制器的背景颜色以查看菜单是否被隐藏。

我的代码位于以下位置：http://codepen.io/3MO/pen/mJKeKg。主要思想如下：

   #menu {
        z-index: 0;
        top: 0px;
        position: absolute;
        width: 100%;
        height: 150px;
        background: linear-gradient(90deg, rgb(60, 60, 60) 40%, white 49%, white 51%, rgb(60, 60, 60) 60%);
        background-repeat: no-repeat;
        background-clip: text;
        text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 16px;
        cursor: auto;
    }
    #menuController {
        z-index: 10;
        top: 0px;
        position: absolute;
        width: 100%;
        height: 150px;
        background-color: red;
    }

我尝试了 position:relative 和 position: absolute 两个 divs，到目前为止运气不好。你能告诉我我做错了什么吗？

谢谢！

您应该将 position: relative 添加到其父 ( <body> ) 元素

我已经设法使用 javascript 解决了这个问题，因为您已经经常使用它了。您需要的功能如下。我暂时隐藏了 menuController，在点击坐标下检查它下面的内容，然后再次显示它。

function registerControllerClick() {
    $(menuController).click(function(event) {
      $(menuController).hide();
      window.location.href = document.elementFromPoint(event.clientX, event.clientY).href;
      $(menuController).show();
     });
}

将其添加到您的初始化代码中：

function init() {
        registerControllerOver();
        registerControllerOut();
        registerControllerClick();
    }

Working example

如果您不想转到 href 指定的位置，而是触发点击事件，请使用 jQuery trigger('click') - 看看 here