css - 在较低的 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: relativeorabsolute属性。因此，如果您position: absolute从第一个 div 中删除 ，它将按预期工作。

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

Answer 2

元素首先在每个级别上排序。所以它订购你的红色和绿色盒子，然后它订购你的红色盒子里面的蓝色盒子，它已经被确定在绿色盒子后面。没有办法解决这个问题。您必须考虑元素的替代布局，这将允许您想要的布局，例如简单地从其 parent 中删除蓝色框。