WebKit Transform Translate3D 破坏 CSS Z-Index
绝对定位时，重叠元素会受到 z-index 堆叠的影响，从而确定它们的相对顺序在画布上。然而，使用translate3d webkit 转换动画会破坏这种堆叠行为。此问题会影响所有支持 webkit 转换的主要移动浏览器。
了解问题
根据 WebKit 错误数据库 (https://bugs.webkit.org) 中的报告/show_bug.cgi?id=61824)，在 z 轴上应用 3D 变换会覆盖 z 索引值。原因在于从2D渲染平面到3D渲染平面的转变。在 3D 空间内，z 值决定元素定位，与渲染 z 索引无关。
解决问题
为了防止这种干扰，必须返回到 2D 渲染对于子元素，通过应用以下 CSS 属性：
transform-style: flat;
此属性确保子元素保留在 2D 中渲染平面，即使在父元素的 3D 变换之后也保留其 z 索引堆叠行为。
以上是为什么 WebKit 的 `translate3d` 会破坏 CSS `z-index` 堆叠？的详细内容。更多信息请关注PHP中文网其他相关文章！
