css动画如何改变z-index？ [复制]

Question

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

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

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%);
}