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-東印度TAHN 9999 #overlay。