z-index下z-index越大？

Question

我似乎无法找到一种方法来为具有较低z-index的父级元素而不是覆盖元素的元素分配更大的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

元素在每个级别上排序 first 。所以它命令你的红色和绿色框，然后它命令你的蓝色框里面红色框，已经确定已经在绿色框后面。没有办法解决这个问题。您必须考虑元素的替代布局，以允许您想要的布局，例如removing the blue box from its parent。