CSS animation appears on top while animation is running

Question

I have a css animation that make an error message box appear above a form when the user presses the validation button (and the input field is invalid).

The issue I have is while the animation is running, the message box appears on top of the form. When the animation is finished, the message box sits below as expected.

How can I make the animation runs below other DIVs ? I tried to change z-index without any success.

See 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

Actually, manipulations with positioning and z-index should help.

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

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

Try adding these attributes to your CSS and you'll see a desired behavior.

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