为什么 css 动画会改变 z-index？

Question

为什么动画改变了 z-index？

如果您查看 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);
  }
}

非常感谢任何帮助！

Answer 1

CSS 动画 reset the z-index.

所以您可能需要做的是将红色图像的 z-index 设置为 0，将蓝色图像的 z-index 设置为 1。

Answer 2

HTML 中的元素根据其 stacking context 在 z 轴上定位。

默认情况下，一个页面有 1 个堆叠上下文 - HTML 元素 - 并且堆叠上下文的所有子项都根据它们的 DOM 顺序定位。

但是，当应用某些 CSS 属性时，可以在元素上创建新的堆叠上下文。 position: absolute 或 position: relative 等属性通常用于创建新的堆叠上下文，这就是为什么您可以使用 z-index 将它们定位在 z 轴上。当一个新的层叠上下文被创建时，它默认位于父层叠上下文之上。

transform 是另一个 CSS 属性，它将创建一个新的堆叠上下文（因为您可以在 z 轴上变换元素）。由于 .blue 元素有一个 transform 但 .red 元素没有，当你注释掉动画时，它会得到一个新的堆叠上下文，默认在父堆叠上下文之上（包括.red 元素）。

因此，要使 .blue 框始终位于顶部，您需要向其添加 position: relative 和 z-index: 1。

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

Answer 3

为什么不在 .blu 上设置 z-index 值？

试试这个：

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

为什么 css 动画会改变 z-index？

How come css animations change z-index?

css

css-transforms

css-animations