css 3d 转换和 zindex 战斗

Question

我有两个 <div>相互重叠的元素，例如:

 -------------
 |           |
 |     A     |
 |           |
 |   ------------
 |   |          |
 |   |          |
 ----|     B    |
     |          |
     ------------

所以我在 A 之后将 B 添加到 DOM。在 div A 中我有一些我应用 css3d 转换的其他 html 元素(图像)，但是当我这样做时它们也出现在 div B 的前面，我总是希望 div B位于 div A 及其所有内容之上。我尝试在两个 div 元素上设置 z-index 属性，但 A 中的 3d 转换元素仍然呈现在 div B 之上。

有什么方法可以让 B 始终出现在 A 的前面及其内容？

谢谢标记。

Answer 1

如果你需要一个元素的 z-index 来处理 3d 转换后的 div，你必须使用 -webkit-transform: translateZ(0px); 来设置它的样式。 p>

Codepen 上的代码片段 -> http://codepen.io/mrmoje/pen/yLIul