為什麼「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中文網其他相關文章！