当动画运行时，CSS动画出现在顶部。

Question

我有一个css动画，当用户按下验证按钮(并且输入字段无效)时，错误消息框出现在表单的上方。

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

如何使动画运行在其他DIVs之下？我试图改变z指数，但没有成功。

见小提琴：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指数的操作应该会有所帮助。

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

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

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

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