CSS 动画出现在顶部而动画是 运行

Question

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

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

如何让动画在其他 DIV 下运行？我尝试更改 z-index 但没有成功。

参见fiddle：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/