html css z-index 不工作,我做错了什么?

标签 html css z-index

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

我的代码位于以下位置: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,到目前为止运气不好。你能告诉我我哪里做错了吗?

谢谢!

最佳答案

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

关于html css z-index 不工作,我做错了什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31386247/

相关文章:

javascript - 如何检查提交的单选按钮是否包含正确答案

javascript - 当鼠标悬停在任一元素上时,如何使多个元素改变背景颜色?

javascript - 我是否正确编写了这些 HTML img 标签?

javascript - 媒体查询/RWD-将图像文件更改为480px

CSS:如何使用 z-index 控制侧边栏背景颜色

css - ipad 上的 z-index 问题(chrome/safari)

html - 如何在 Electron 的自定义标题栏中显示/隐藏最大化/最小化按钮

javascript - 当第一个菜单切换时二级菜单消失?

javascript - Chrome 警告框提交页面,即使返回 false

css - react /语义-ui : How to get a fullscreen segment