webkit转换后，css z-index丢失了

98

我有两个绝对重叠的div元素。两者都通过CSS设置了z-index值。我使用translate3dwebkit转换在屏幕外为这些元素设置动画，然后再回到屏幕上。转换后，元素不再遵守其设置z-index值。

一旦我对它们进行webkit转换，谁能解释div元素的z-index / stack-order会发生什么？并说明如何保持div元素的堆叠顺序？

这是有关我如何进行转换的更多信息。

在转换之前，每个元素都会通过CSS设置这两个Webkit转换值（我正在使用jQuery进行.css()函数调用：

element.css({ '-webkit-transition-duration': duration + 's' });
element.css({ '-webkit-transition-property': '-webkit-transform' });

然后使用translate3d -webkit-transform对元素进行动画处理：

element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px, 0, -1px)' });

顺便说一句，我试图将3rd参数设置translate3d为几个不同的值，以尝试在3d空间中复制堆栈顺序，但是没有运气。

另外，iPhone / iPad和Android浏览器是我的目标浏览器，此代码需要在其上运行。两者都支持Webkit过渡。

css webkit transform

— 拉菲
source

您可以发布链接以查看示例吗？

— Littlemad 2011年

1

我遇到了同样的问题。我有一个<iframe>标签，其内部元素样式为“ -webkit-transform：translate3d（0,0,0）”，用于强制3d加速。事实证明，具有较高z-index的外部框架始终被内部iframe元素隐藏。只是视觉隐藏，我可以“单击”不可见的外部元素。这仅在Mobile Safari中发生。

— Morgan Morgan

我花了10个小时才弄清楚那是使我的代码无法正常工作的原因。Ugh

— Dikeneko '18

52

这可能与以下内容有关：https : //bugs.webkit.org/show_bug.cgi?id=61824

基本上，当您在z轴上应用3D变换时，就无法再计算z索引了（您现在位于3D渲染平面中，请使用不同的z值）。如果要切换回2D渲染子元素，请使用transform-style: flat;。

— 萨米豪华
source

13

基本上，当您在z轴上应用3D变换时，就无法再计算z索引了（您现在位于3D渲染平面中，请使用不同的z值）。如果要切换回2D渲染子元素，请使用transform-style: flat;。

— samy-delux，2013年

2

因此，在“ preserve-3d”模式下，我们必须使用转换的z轴设置顺序，而在平面模式下，我们应使用z-index。错误是与野生动物加速转换结合使用时，Safari中的z-index被破坏了。

— 史蒂文·卢

1

不起作用。仅在按类别删除动画笔时才有效。

— fdrv

44

这绝对与samy-delux指出的错误有关。这仅会影响定位为绝对或相对的任何元素。为了解决此问题，可以将以下css语句应用于以此方式定位并导致问题的每个元素：

-webkit-transform: translate3d(0,0,0);

这会将变换应用于元素，而无需实际进行变换，但会影响其渲染顺序，因此它位于导致问题的元素上方。

— divThis
source

使用Chrome（35.0.1916.114 m），我发现如果没有此规则，则在翻转元素后[transform：rotateY（180deg）]，jQuery单击处理程序将不再对该元素起作用。此外，翻转之后，屏幕上还会留有伪影，尤其是如果更改了不透明度，除非存在translate3d，否则尤其如此！本文帮助sitepoint.com/fix-chrome-animation-flash-bug

— 菲利普·墨菲

2

这对我来说解决了一个非常棘手的问题，涉及两个固定元素，一个包含3d转换元素。3d转换后的元素基本上会溢出并位于另一个元素的顶部，直到应用了上述修复程序为止。

— Collin James

1

不起作用。仅在按类别删除动画笔时才有效。

— fdrv

12

有点晚了，但是尝试放置丢失Z索引的元素，将其放在下面，最近在做一些视差处理时遇到了一个问题，这极大地帮助了我。

transform-style: preserve-3d;

这样可以节省推杆

transform: translate3d(0,0,0);

在其他元素上，这会给GPU带来更大的压力

— 生锈的柯林斯
source

1

当您的元素是3d时，我不希望进行转换会给GPU带来额外的负担。无论如何都需要进行计算。您基于什么？

— Micros

7

等待看例子

您是否尝试过进行变换比例（1）？我记得曾经遇到过类似的问题，我不得不重新排列元素的html顺序，并利用了我不需要的转换，因为转换的z-index发生了变化。

如果我没有记错的话，那么每次使用变换时，它都会成为可用的最高z索引，并且它是按html的最近元素到标记的开头进行排序的。所以从上到下。

希望对您有所帮助

— 小疯子
source

6

z-index 如果使用以下样式设置stackable元素，则将对3d转换的div起作用 -webkit-transform: translateZ(0px);

Codepen上的代码段-> http://codepen.io/mrmoje/pen/yLIul

在示例中，按钮stack up和相stack down对于旋转后的元素（在本例中为img）升高和降低页脚的z-index（+/- 1）。

— 莫尔莫耶
source

无法再次单击堆栈

— clevertension 2014年

嘿@Moje我也想知道这个问题。仍然无法再次单击堆栈。

— alchuang 2014年

为什么我不考虑在翻译后的元素上添加负的z-index？谢谢

— 2014年

3

我无法重现您在此处描述的问题。无论我做什么，z-index值都会在所有变换中保留。我正在使用Chromium（Google Chrome）进行测试。

translation3d函数的第三个参数操纵元素的z轴。该概念与z索引相似但不完全相同。z轴较低的元素位于值较高的元素下。

我知道您尝试过使用第三个参数的值来匹配您想要的z-index，但是问题是CSS3动画期间z轴似乎没有变化。在以下示例中，悬停的元素应位于顶部，但#element_a仍位于顶部。

如果我在常规选择器和：hover选择器中都添加了一个z-index，那么它似乎可以正常工作，并且允许将鼠标悬停在最上方的元素。

尽管这并不是您要找的东西，但此行为提供了解决方案。您只需要使用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_com/images/srpr/logo3w.png">
    </div>
    <div id="element_b">
        <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png">
    </div>
</body>

2

这对我有用-谢谢！我在想成为“最前面”的元素中添加了以下内容：-webkit-transform：translate3d（0，0，1px）;

— Sam Dutton 2014年

0

解决此问题的另一种方法是，您可以创建一个父元素并应用与其相关的所有其他过渡：

# 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

— 锈
source