为什么'translate3d”会破坏重叠绝对定位元素中的 Z 索引顺序？

Webkit Transform Translate3d 的 Z 索引异常

在两个具有指定 z 索引值的绝对定位 div 元素重叠的场景中，应用一个translate3d webkit转换将它们动画化并返回到屏幕上可能会破坏它们的z-index

说明

使用translate3d时，元素进入三维渲染平面，其中z-index变得无关紧要。变换沿 z 轴移动元素，打破了传统的 2D 堆叠顺序。

解决方案

要恢复 z 索引排序：

1. 通过设置transform-style: flat;切换回子元素的2D渲染。这会强制元素表现得就像在平坦的 2D 空间中一样。

element.css({ 'transform-style': 'flat' });

附加说明

• 问题可能相关Webkit bug #61824。
• 该解决方案适用于支持的 iPhone/iPad 和 Android 浏览器Webkit 过渡。
• 将 translate3d 的第三个参数设置为不同的值并不能解决 3D 空间中的堆栈顺序问题。

以上是为什么'translate3d”会破坏重叠绝对定位元素中的 Z 索引顺序？的详细内容。更多信息请关注PHP中文网其他相关文章！