Question

我一直在敲打着我的脑袋一段时间，尽管有一些谷歌搜索并且正在阅读我已经到达了我的系绳的末端。

我有一个固定的位置标题，我的内容在下面滚动。在标题中，我有一个菜单图标，用于打开覆盖整个页面的覆盖图中的菜单。

我想要的是，菜单图标位于叠加层上方，叠加层位于标题上方，标题位于其他所有位置之上。

我写了一个小提琴来隔离问题并希望找到解决方案。

<div class="overlay"></div>
<header> 
    <span>☰</span>
</header>

-

html, body {
    height: 100%;
}
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: rgba(255,0,0,.7);
}
header span {
    float: left;
    margin-left: 20px;
    margin-top: 12px;
    cursor: pointer;
    z-index: 1000;
}
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,255,255,.3);
    z-index: 900;
}

如果无法做到这一点，我愿意接受有关不同方法的建议。

http://jsfiddle.net/6d4wj7yt/

Answer 1

将.overlay移至<header>并设置为position以外的static菜单图标。

<强> Example Here

<header> 
    <div class="overlay"></div>
    <span>☰</span>
</header>

header span {
    float: left;
    margin-left: 20px;
    margin-top: 12px;
    cursor: pointer;
    z-index: 1000;
    position: relative; /* <-- added declaration */
}

解释

由于header绝对定位 - fixed - 它会建立一个新的堆叠上下文，因此将.overlay移到header，.overlay和嵌套的span将共享相同的堆叠上下文。

此外，z-index仅适用于非static定位元素，因此您需要为元素position提供static以外的其他元素。

CSS定位和z-index

1 个答案:

解释