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？

3 个答案: