更低z-索引內的z-index？

Question

我似乎無法找出一種方法來分配更大的z-index優先級的元素具有比overlay元素更低的z-index的父級。

考慮這個例子：

<div style="width: 100px; height: 100px; background: #F00; position: absolute; left: 0; top: 0; z-index: 1;"> 
    <div style="width: 50px; height: 100px; background: #00F; position: absolute; left: 50px; top: 0; z-index: 3;"></div> 
</div> 
<div style="width: 100px; height: 50px; background: #0F0; position: absolute; left: 0; top: 50px; z-index: 2;"></div> 

結果：

預期的結果：

Answer 1

你可以這樣做，但僅在父項的屬性上沒有position: relative或absolute屬性。因此，如果您從第一個div中刪除position: absolute，它將按預期工作。

的jsfiddle：http://jsfiddle.net/GEnHC/

Answer 2

元素，會下令對每個級別第一。所以它訂購你的紅色和綠色的盒子，然後在裏面訂購你的藍色盒子紅色盒子，它已經被確定在綠色盒子後面。這是沒有辦法的。你不得不考慮你的元素的替代佈局，這將允許你想要的佈局，比如簡單的removing the blue box from its parent。