CSS 定位和 z-index

Question

一段时间以来，我一直在努力解决这个问题，尽管在谷歌上搜索和阅读了一些资料，但我已经快筋疲力尽了。

我有一个固定位置的标题，我的内容在下方滚动。在页眉中，我有一个菜单图标，可以在覆盖整个页面的叠加层中打开一个菜单。

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

我已经写了一个 fiddle 来隔离问题并希望找到解决方案。

<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 .