html - Chrome 中不同父级元素的 z-index

Question

有两个容器。一个是固定的，覆盖 100% 的屏幕。其次是相对的——包含可滚动的内容。问题是有四个元素彼此相对定位，如下所示:第一个在固定容器中，第二个在绝对容器中，第三个固定，第四个绝对。

<div class="container fixed">
    <div class="el z1"></div>
    <div class="el z3"></div>
</div>
<div class="container relative">
    <div class="el z2"></div>
    <div class="el z4"></div>
</div>

但是，其中一个父元素的 z-index 总是小于另一个，这不允许对 4 个子元素进行排序。

有 fiddle http://jsfiddle.net/only_dimon/zkY4C/6/ 我要顺序:黄色、绿色、白色、黑色从底部开始。但正如您所见 - 黄色、白色、绿色、黑色。

我想要的结果:

但是元素应该在不同的容器中。

提前致谢!

这对我有帮助:对于许多元素只有助于 html 重建。幸运的是，我不需要为固定元素使用固定容器，因为固定元素的位置和大小取决于窗口大小，即使我将它们放入相对容器也是如此。

Answer 1

经过进一步调查，子元素不能/不应该能够覆盖父 z-index，某些浏览器(例如 Firefox)虽然出于某种原因忽略了父索引并显示了您希望的元素，但每个我试过的其他浏览器(Opera、Safari、Chrome)没有，所以不，如果不更改 HTML 标记以实现跨浏览器兼容性，就不可能完成你想要的。

编辑:

您甚至可以在该主题中找到相当多的帖子。

How can I get a child of an element with lower z-index on front of a child of another element with higher z-index?

How to get a parent element to appear above child

can I override z-index inheritance from parent element?

编辑 - 2:

根据您想要实现的目标，有许多替代方法可以获得伪造的“zindex”行为，值得一看的是 pointer-events:none; 以及透明背景永远不会知道它在其他元素之上。

如果是背景，你可以使用不同设置的盒子阴影来伪造它。

无法想出任何其他原因 atm，但如果您告诉我，我也会尝试为您提供解决方案。

问候