CODEWITHSUNDEEP
cssz-indexcss-animations
Matty Balaam
Matty Balaam

Reputation: 1309

z-index lost when parent has css animation

I have a child elements which I have stacked behind the parent using a z-index. But, once I add an animation to the parent, the z-index is not honoured.

This happens on both Firefox and Chrome, I have not tested on IE.

I assume this is a bug rather than behaviour expected of CSS, but does anyone have a workaround?

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

Upvotes: 0

Views: 640

Answers (1)

Andre Fuentes
Andre Fuentes

Reputation: 98

According to W3C

Any computed value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.

I think that is the cause of your problem, once the parent animates, the child becomes stacked

You may try to add a wrapping element, and animate it, like this: http://jsfiddle.net/9Mc3y/

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

Upvotes: 2

Related Questions