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

您必须将覆盖 div 移动到内容 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 都在创建新的堆叠上下文。这些无法再次合并。

Answer 2

尝试

#e2{
    z-index:1001;
    position: absolute;
}

它应该成功。

如果不尝试：

#e2{
    z-index: 9999 !important;
    position: absolute !important;
    top: 0px; //you can change that
    left: 0px; //you can change that
}

如果它仍然无法正常工作，很可能某些 javascript 将更大的 z-indes tahn 9999 设置为#overlay。