Css 在动画容器的子元素上忽略z索引

参考此示例：

我注意到，当我将动画填充模式设置为“前进”的动画容器时，其内部弹出的绝对定位子元素并没有按预期显示，而且它们的z索引似乎被忽略

我的动画：

.animate {
  animation-direction: reverse;
}

.animate.animate--from-bottom {      
  opacity: 0;
  animation: from-bottom 0.3s ease-out;
  animation-fill-mode: forwards;  
}

@keyframes from-bottom {
  0% {transform: translateY(80px);opacity:0;}
  100% {transform: translateY(0px);opacity:1;}
}

我的子元素弹出窗口

.popup {
  z-index: 10;
  position: absolute;
  background: white;
  padding: 0 1rem;
  box-shadow: 2px 2px 5px 5px rgba(0,0,0,0.1);
  width: calc(300px - 2rem);
}

如果我移除动画填充模式，子元素将显示得很好

---

有人能帮助我理解这个行为和解决方法吗？这样我的子元素popup就可以在父元素和动画父元素下工作。

你必须将类添加到popup的父元素中

假设我将类have\u popup添加到popup的父div

现在将css应用于该类，如下所示：

.have_popup {
    position: relative;
    z-index: 1;
}

我希望这会对你很好

---

谢谢您……

您可以为第三版设置如下css属性

要使第二个div的内容在顶部可见，您可以尝试将第三个div的z-index设置为较低的值

.dv {
  position: relative;
  z-index: -1;
}

---

演示-。

定位div和Hello World div具有不同的堆叠上下文。