css - z-index 问题 CSS

Question

我有一个容器和容器中动态生成的div。

HTML

<div id="overlay">
</div>
<div id="cont">
    <div id="e1">
        Some
    </div>
    <div id="e2">
        Content
    </div>
</div>

CSS

#cont{
    position: fixed;
    top:40%;
    left:20%;
    z-index:999;
    color:#a8a8a8;
}
#overlay{
    position:fixed;
    background: rgb(0,0,0);
    opacity: 0.5;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:1000;
}
#e2{
    z-index:1001;
}

检查这个 jsfiddle: http://jsfiddle.net/UkbXU/

我有一个 z-index 1000 和背景 rgba(0,0,0,0.5) 的叠加层，照片容器在叠加层后面我只希望一个元素位于叠加层之上，即 z-index 1001。那里是容器中的其他元素，我这样做是为了显示元素突出显示的效果。但是创建一个带有 z-index: 1001 的类不会将元素置于叠加层之上。

如何设置一个元素的z-index大于容器？

Answer 1

你必须将 overlay-div 移动到 content-div 中:

<div id="cont">
    <div id="overlay"></div>

    <div id="e1">
        Some
    </div>
    <div id="e2">
        Content
    </div>
</div>

和位置#e2 必须设置为相对的。参见 http://jsfiddle.net/UkbXU/10/

否则是不可能的，因为#cont 和#overlay 都在创建新的堆叠上下文。这些无法再次合并。