2

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;
}
Florent
  • 391
  • 1
  • 12
  • z-index is the right setting, but you might've applied it to the wrong element. Keep in mind that inline styles will overwrite other styles unless marked with !important (such as `z-index: 100 !important`), and that script-based animations will likely use inline styles. – TheThirdMan May 02 '16 at 11:01

1 Answers1

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/

Mitya Ustinov
  • 903
  • 3
  • 11
  • 17
  • Thank you, I think I was not considering the absolute positionning inherited from parent, that's why z-index was not working – Florent May 02 '16 at 13:34
  • 1
    I think the issue was not in inheritance of absolute positioning, but in presence of position attribute as such. To have z-index working you need to position element first as absolute, fixed or relative. Without it z-index is useless. https://developer.mozilla.org/en-US/docs/Web/CSS/z-index – Mitya Ustinov May 02 '16 at 20:56