动画运行时，CSS动画显示在顶部

我有一个css动画，当用户按下验证按钮（输入字段无效）时，会在表单上方显示一个错误消息框

我遇到的问题是，当动画运行时，消息框出现在窗体顶部。动画完成后，消息框将按预期位于下方

如何使动画在其他div下运行？我试图更改z索引，但没有成功

参见小提琴：

---

实际上，使用定位和z索引进行操作应该会有所帮助

#requestQuoteBox .form-group {
  position: relative;
  z-index: 2;
}

#requestQuoteBox .alert {
  position: relative;
  z-index: 1;
}

尝试将这些属性添加到CSS中，您将看到所需的行为

---

z-index是正确的设置，但您可能将其应用于错误的元素。请记住，除非标记为，否则内联样式将覆盖其他样式！重要的（例如

z-index:100！重要的
），基于脚本的动画可能会使用内联样式。谢谢，我想我没有考虑从父级继承的绝对位置，这就是为什么z-index不起作用的原因。我想问题不在绝对位置的继承上，但在存在位置属性的情况下。要使z索引工作，您需要首先将元素定位为绝对、固定或相对。没有它，z-索引是无用的。
#requestQuoteBox .form-group {
  position: relative;
  z-index: 2;
}

#requestQuoteBox .alert {
  position: relative;
  z-index: 1;
}