webkit转换translate3d后，css z-index丢失了
我有两个绝对定位的div元素重叠。 两者都通过css设置了z-index值。 我使用translate3d webkit转换来将这些元素从屏幕上移开，然后返回到屏幕上。 变换之后，元素不再尊重它们的z-index值。
任何人都可以解释一旦我做了一个webkit转换的div元素z-index /堆栈顺序会发生什么？ 并解释我能做些什么来保持div元素的堆栈顺序？
以下是关于我如何进行转换的更多信息。
在转换之前，每个元素都通过css获取这两个webkit转换值（我使用jQuery来执行.css()函数调用：
element.css({ '-webkit-transition-duration': duration + 's' }); element.css({ '-webkit-transition-property': '-webkit-transform' });
然后使用translate3d -webkit-transform对元素进行animation处理：
element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px, 0, -1px)' });
顺便说一句，我已经尝试将translate3d的第三个参数设置为几个不同的值来尝试复制三维空间中的堆栈顺序，但没有运气。
此外，iPhone / iPad和Android浏览器是我的目标浏览器，这个代码需要运行。 两者都支持webkit转换。
这可能涉及： https ： //bugs.webkit.org/show_bug.cgi？id = 61824
基本上，当您在z轴上应用3D变换时，z-index不能再被考虑（您现在处于三维渲染平面中，使用不同的z值）。 如果您想切换回2D渲染子元素，请使用transform-style: flat; 。
这绝对与samy-delux提到的错误有关。 这应该只影响任何被定位为绝对或相对的元素。 为了解决这个问题，你可以把下面的css语句应用到每个被这样定位的元素，并且引起问题：
-webkit-transform: translate3d(0,0,0);
这会将变换应用到元素而不实际进行转换，但会影响其渲染顺序，因此它会超出导致问题的元素。
Bit迟到这个，但是尝试把失去Z-index的元素放在下面，我最近在做一些视差的时候遇到了一个问题，这个问题很有帮助。
transform-style: preserve-3d;
这节省了推杆
transform: translate3d(0,0,0);
在其他让GPU更加紧张的元素上
等待看到这个例子
你有没有试图做一个变换比例（1）？ 我记得有一个类似的问题，我不得不重新安排元素的html顺序，并利用一个我不需要的转换，只是因为转换的z-index使用改变了。
如果我没有错，每次你使用一个转换，它就成为可用的最高z-索引，并且它是按html最近的元素sorting的，就是标签的开始。 所以从下到上。
我希望这有助于
如果使用-webkit-transform: translateZ(0px);设置可堆栈元素，则z-index将对3d转换的div进行工作-webkit-transform: translateZ(0px);
codepen上的代码片段 – > http://codepen.io/mrmoje/pen/yLIul
在这个例子中，这些buttonstack up并stack up ，相对于旋转的元素（在这种情况下是一个img）升起和降低页脚的z-索引（+/- 1）。
我一直无法重现你在这里描述的问题。 无论我做什么，z-index值都保留在所有转换中。 我正在使用Chromium（Google Chrome）进行testing。
translate3d函数的第三个参数操作元素的z轴。 这个概念与z-index类似，但不完全相同。具有较低Z轴的元素在具有较高值的元素下。
我知道你尝试了第三个参数的值来匹配你想要的Z-索引，但问题是，在CSS3animation过程中，Z轴似乎没有改变。 在以下示例中，hover元素应位于最上方，但#element_a位于顶部。
如果我添加一个z-index到常规select器和：hoverselect器，它似乎工作，并允许hover元素是最顶级的。
虽然这不是你正在寻找的东西，但是这种行为提供了一个解决scheme。 您只需使用translate3d和z-index来设置初始渲染的顺序。
<style> div { width: 300px; height: 150px; background-color: white; border: 5px outset gray; float: left; margin: 20px; -webkit-transition: 2s; } #element_a { -webkit-transform: translate3d(0, 0, 50px); } #element_b { -webkit-transform: translate3d(0, 0, 100px); } #element_a:hover { -webkit-transform: translate3d(100px, 0, 60px); } #element_b:hover { -webkit-transform: translate3d(-100px, 0, -60px); } </style> <body> <div id="element_a"> <img src="http://www.google.com/intl/en_comhttp://img.dovov.comsrpr/logo3w.png"> </div> <div id="element_b"> <img src="http://www.google.com/intl/en_comhttp://img.dovov.comsrpr/logo3w.png"> </div> </body>
解决这个问题的另一个方法是，你可以创build一个父元素并应用与之相关的所有其他转换：
# Apply transitions to a parent div <div> # This image z-index -1 <img src="foo"/> # This image z-index -3 <img src="bar"/> #This image z-index -2 <img src="gg"/> </div>
的jsfiddle
