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都在创建新的堆叠上下文.这些不能再合并.