當父母有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>