css - 在动画容器的子元素上忽略 z-index

Question

引用这个示例: https://codepen.io/jyloo/pen/KKwoLKB

我注意到当我将动画容器的动画填充模式设置为转发时，其中绝对定位的子元素(弹出窗口)不会按预期显示，而且它们的 z-index 似乎被忽略了。

我的动画:

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

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

任何人都可以帮助我理解这种行为和解决方法，以便我的子元素(弹出窗口)可以在动画父元素下找到。

Answer 1

您可以为第 3 个 div 使用如下所示的 css 属性。

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

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

演示 - https://codepen.io/AB-DEV/pen/LYEdKPj .