Question

我有两个绝对定位的div元素重叠。两者都通过css设置了z-index值。我使用translate3d webkit变换在屏幕上为这些元素设置动画，然后返回到屏幕上。转换后，元素不再遵循其设置的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)' });

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

此外，iPhone / iPad和Android浏览器是我的目标浏览器，需要运行此代码。两者都支持webkit转换。

Answer 1

这可能与：https://bugs.webkit.org/show_bug.cgi?id=61824

有关

基本上，当您在z轴上应用3D变换时，不能再考虑z-index（您现在处于3维渲染平面中，使用不同的z值）。如果要切换回子元素的2D渲染，请使用transform-style: flat;。

Answer 2

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

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

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

Answer 3

比较迟到但是尝试将丢失了Z-index的元素置于下面，我最近在做一些视差时遇到了一个问题，这大大帮助了。

transform-style: preserve-3d;

这样可以节省点数

transform: translate3d(0,0,0);

关于在GPU上施加更多压力的其他元素

Answer 4

等待查看示例

您是否尝试过转换比例（1）？我记得有一个类似的问题，我不得不重新安排元素的html顺序，并利用我不需要它的变换只是因为变换使用的z-index改变了。

如果我没有错误，每次使用变换时，它都会成为可用的最高z-index，并且最接近的html元素按照标签的开头排序。所以从下到下。

我希望这个帮助

Answer 5

如果使用z-index

设置可堆叠元素的样式，

-webkit-transform: translateZ(0px);将对3d转换后的div进行处理

代码集上的代码段 - ＆gt; http://codepen.io/mrmoje/pen/yLIul

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

Answer 6

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

translate3d函数的第三个参数操纵元素的z轴。这个概念与z-index相似但不完全相同...具有较低z轴的元素位于具有较高值的元素之下。

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

如果我在常规选择器和：hover选择器中添加z-index，它似乎可以工作并允许hovered元素位于最顶层。

虽然它并不完全符合您的要求，但这种行为提供了一种解决方案。您只需使用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>

Answer 7

另一种方法是你可以创建一个父元素并应用与之相关的所有其他转换：

# 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

Answer 8

我在 iphone/ios 上遇到了这个问题，我有一个与传单地图重叠但被地图覆盖的下拉菜单。注意到地图应用了 translate3d。

将此添加到下拉元素：

transform: translate3d(0,0,0);

...它是固定的。感谢 stackoverflow 的人们。

webkit转换translate3d后css z-index丢失

8 个答案: