时间戳

首页 > 解决方案 > css动画如何改变z-index？

css - css动画如何改变z-index？

问题描述

为什么动画改变了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);
  }
}

任何帮助深表感谢！

标签： csscss-animationscss-transforms

解决方案

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

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

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

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

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

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

推荐阅读