当父有css动画时，z-index丢失了

Question

我有一个子元素，我使用z-index堆叠在父元素后面。但是，一旦我向父母添加动画，就不会尊重z-index。

在Firefox和Chrome上都会发生这种情况，我还没有在IE上测试过。

我认为这是一个错误，而不是CSS的预期行为，但有没有人有解决方法？

http://codepen.io/MattyBalaam/pen/Gakmr

Answer 1

根据W3C

  

转换的任何非计算值都会导致   创建堆叠上下文和包含块。物体   充当固定位置后代的包含块。

我认为这是你问题的原因，一旦父动画，孩子就会堆积

您可以尝试添加包装元素并对其进行动画处理，如下所示：http://jsfiddle.net/9Mc3y/

<span class="wrap animated">
    <span class="overlay">parent animated
        <span class="below">b</span>
    </span>
</span>