How come css animations change z-index?

Question

Why is it that the animation changes the z-index?

If you look at the jsfiddle, you'll see the red image is on top but if you comment out the animation, the blue image is on top. How can I get the blue image to always be on top even with the animation?

jsfiddle

HTML

<img class="blue" src="http://via.placeholder.com/200/0037ff">
<img class="red" src="http://via.placeholder.com/200/ff0010">

CSS

.red {
  -webkit-animation-name: red;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-name: red;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.blue {
  transform: translate(30%);
}

@keyframes red {
  from {
    transform: translate(50%);
  }
  to {
    transform: translate(0);
  }
}

Any help is much appreciated!

Steven Lambert · Accepted Answer · 2018-06-16T04:00:14.027

Elements in HTML are positioned on the z-axis according to their stacking context.

By default a page has 1 stacking context – the HTML element – and all children of a stacking context are positioned according to their DOM order.

However, a new stacking context can be created on an element when certain CSS properties are applied. Properties such as position: absolute or position: relative are commonly used to create new stacking contexts, which is why you are able to position them on the z-axis with z-index. When a new stacking context is created, it is positioned above the parent stacking context by default.

transform is another CSS property that will create a new stacking context (since you can transform an element on the z-axis). Since the .blue element has a transform but the .red element doesn't when you comment out the animation, it gets a new stacking context which defaults to above the parent stacking context (which includes the .red element).

So to get the .blue box to always stay on top, you'll need to add position: relative and z-index: 1 to it.

.blue {
  position: relative;
  z-index: 1;
  transform: translate(30%);
}

score 0 · Answer 2 · answered Jun 15 '18 at 22:32

0

CSS Animations reset the z-index.

So what you probably have to do is give the red image a z-index of 0 and the blue image a z-index of 1.

answered Jun 15 '18 at 22:32

Advena

1,664
2
24
45

Adding a z-index didn't do anything. – Jeff Jun 15 '18 at 22:53
Did you also set z-index on @keyframes, both from and to? Because this seems to work: http://jsfiddle.net/0wquLz46/23/ – Advena Jun 15 '18 at 22:55

score 0 · Answer 3 · answered Jun 15 '18 at 22:40

0

Why dont you put a z-index value on .blu?

try this:

.blue{
z-index: 999;
transform: translate(30%);
}

answered Jun 15 '18 at 22:40

Jaziel_Inc

82
2
9

Adding z-index doesn't help – Jeff Jun 15 '18 at 22:52
i see, it works only in firefox, sorry man. – Jaziel_Inc Jun 15 '18 at 22:57
1

UPDATE: add a position: `relative` to `.blue` and try it – Jaziel_Inc Jun 15 '18 at 23:03

How come css animations change z-index?

3 Answers3

Linked