为什么 webkit 转换会覆盖元素的 z-index 值？答案

【问题标题】：Why is webkit transform overriding the z-index values of an element?为什么 webkit 转换会覆盖元素的 z-index 值？
【发布时间】：2014-04-05 12:10:24
【问题描述】：

所以我有两个 div 相互堆叠，产生卡片翻转效果。见jsFiddle。 DIV 顶部有一个翻转按钮，单击该按钮会向容器中添加一个“翻转”类，从而将 Back Slide 翻转到视图中。

问题出在：当背面幻灯片出现时，-webkit-transform: rotateY(180deg) 值似乎会覆盖“翻转”按钮的 z-index 值，因此堆叠的 DIV 顶部的任何内容都会进入后面。

我在研究这个问题时发现了this stackoverflow question，但添加-webkit-transform: translate3d(0px, 0px, 0px) 对我没有用。

这是 HTML 标记：

<div class="carousel-slide current">
  <div class="flipper">
    <div class="fl front">
        <img src="http://placehold.it/411x274/ff9900/fff" />
    </div>
    <div class="fl back">
        <img src="http://placehold.it/411x274/59a5d1/fff" />
    </div>
  </div> 

  <a class="btn-flip" href="#">Flip</a>
</div>

您可以在jsFiddle中查看CSS/JS。

【问题讨论】：

标签： jquery html css z-index

【解决方案1】：

问题在于，当您在 3D 中工作时，大多数 z 尺寸必须设置为 3D。并且 z-index 变得越来越不相关。

你可以解决你的问题，把按钮放在前面（在 3D 中）

.btn-flip {
    ....
    -webkit-transform: translateZ(1px);
}

fiddle

【讨论】：