z-index 在动画容器的子元素上被忽略答案

【问题标题】：z-index ignored on child elements of an animated containerz-index 在动画容器的子元素上被忽略
【发布时间】：2020-01-10 16:08:16
【问题描述】：

参考此示例： 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);
}

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

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

【问题讨论】：

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

标签： css css-animations

【解决方案1】：

你可以像下面那样为第三个 div 设置 css 属性。

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

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

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

【讨论】：

【解决方案2】：

您必须将类添加到弹出窗口的父 <div>。

假设我已将 have_popup 类添加到弹出窗口 <div class="card have_popup"> 的父 div。

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

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

我希望这对你有用。

谢谢...

【讨论】：