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

Question

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

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

如何让动画在其他DIV下运行？我试图改变z-index而没有任何成功。

请参阅小提琴：https://jsfiddle.net/FlorentM/zhp9qb8z/15/

#requestQuoteBox .alert.ng-hide-remove {
  transition: 5000ms cubic-bezier(0.250, 0.100, 0.250, 1.000) all;
}

#requestQuoteBox .alert.ng-hide {
  opacity: 0;
  margin-bottom: -50px;
}

Answer 1

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

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

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

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

https://jsfiddle.net/mityaustinov/yzwjd8ps/2/