有两个容器。其中一个是固定的并覆盖 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 个子元素进行排序。
有小提琴http://jsfiddle.net/only_dimon/zkY4C/6/我想要的顺序是：从底部开始黄、绿、白、黑。但正如你所看到的——黄色、白色、绿色、黑色。
The result I want:
但元素应该位于不同的容器中。
提前致谢！
这对我有帮助：对于许多元素仅有助于 html 重建。幸运的是，我不需要为固定元素使用固定容器，因为固定元素的位置和大小取决于窗口大小，即使我将它们放入相对容器中也是如此。
经过一些进一步的调查，子元素不能/不应该能够推翻父 z-index，某些浏览器（例如 Firefox）虽然出于某种原因忽略父索引并按照您的意愿显示您的元素，但所有其他浏览器我我已经尝试过（Opera、Safari、Chrome）没有，所以不，如果不更改 HTML 标记以实现跨浏览器兼容性，就不可能完成您想要的任务。
Edit:
您甚至可以在该主题中找到相当多的帖子。
如何在具有较高 z-index 的另一个元素的子元素前面获取具有较低 z-index 的元素的子元素？
如何让父元素出现在子元素之上
我可以覆盖父元素的 z-index 继承吗？
编辑 - 2：
根据您想要完成的任务，有很多替代方法可以获得假的“zindex”行为，值得一看的是pointer-events:none;加上透明背景，您永远不会知道它位于其他元素之上。
如果是背景，您可以使用具有不同设置的 box-shadow 来伪造它。
无法想出任何其他原因，但如果您告诉我，我也会尽力为您提供解决方案。
Regards