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

Question

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

如果您查看 jsfiddle，您会看到红色图像位于顶部，但如果注释掉动画，则蓝色图像位于顶部。即使有动画，如何才能使蓝色图像始终位于顶部？

jsfiddle

超文本标记语言

<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

HTML 中的元素根据其堆叠上下文定位在 z 轴上定位在 z 轴上。

\n\n

默认情况下，页面有 1 个堆叠上下文 \xe2\x80\x93，HTML 元素 \xe2\x80\x93 和堆叠上下文的所有子元素均根据其 DOM 顺序进行定位。

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n