當父有css動畫時，z-index丟失了

Question

我有一個子元素，我使用z-index堆疊在父元素后面。 但是，一旦我向父母添加動畫，z-index就不受尊重了。

這種情況發生在Firefox和Chrome上，我還沒有在IE上測試過。

我認為這是一個bug而不是CSS的預期行為，但有沒有人有解決方法？

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

Answer 1

根據W3C

對於變換，除了none之外的任何計算值都會導致創建堆疊上下文和包含塊。 該對象充當固定定位后代的包含塊。

我認為這是你的問題的原因，一旦父母動畫，孩子就會堆積起來

您可以嘗試添加包裝元素，並為其設置動畫，如下所示： http ： //jsfiddle.net/9Mc3y/

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