html css z-index 不起作用，我做错了什么？答案

【问题标题】：html css z-index not working, what do I do wrong?html css z-index 不起作用，我做错了什么？
【发布时间】：2015-07-14 23:45:04
【问题描述】：

我试图让 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;
    }

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

谢谢！

【问题讨论】：

z-index 不仅仅是为了提高价值。许多事情都会发挥作用，例如定位，最重要的是亲子关系。您不能将父元素放在子元素的前面。
好的，但 2 个 div 与父级无关...
codepen.io/anon/pen/zGaBPd 将 css 文件分开。更容易调试:)

标签： html css z-index

【解决方案1】：

您应该将 position: relative 添加到它们的父 (<body>) 元素中

【讨论】：

【解决方案2】：

我已经设法使用 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

【讨论】：

谢谢，成功了！我仍然不明白，为什么这能解决问题，放置不同的值有什么问题？另外，我没有看到链接上的鼠标光标发生变化，似乎后面的 div 根本没有收到任何事件。有办法纠正吗？
嗯，其实我弄错了，在文本仍然可见的意义上它不起作用。我试图反转 html 中的两个 div，然后它可以工作（我不知道为什么），但链接不再可点击。
检查这个问题 - 它是关于创建新的堆叠上下文和使用 z-index - stackoverflow.com/questions/16148007/… 你到底想要实现什么？您希望#menuController 位于前面，但又希望#menu 可点击？你能准确地说出你需要什么吗？
我的目标是有一个像这样的灯光效果：codepen.io/3MO/pen/VLdjmx
现在您有了菜单中的元素，您可以触发“点击”事件 - 请参阅 stackoverflow.com/questions/5811122/…