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