4

I have an image I want to animate, it should slide bottom up to its position. I'm using Angular 5 animations and so far my animation works, but not exacly as I want it. Please check this Plunker as it is an example of what I have.

Ok, I have two div's with height: 50%. The top div has an image (represented as a red square in the plunker) set with position: absolute. I'm animating this image (red square) to appear from bottom to up, but the problem is:

I want the image to come from the bottom, but behing the bottom div and it is coming in front of it.

I tried z-index, didn't work, figure out why, couldn't think of another way that didn't sound like a cheap and ugly workaround.

Thanks.

João Ghignatti
  • 2,281
  • 1
  • 13
  • 25

1 Answers1

4

Add position: relative; along with z-index to #bottom div. 

#bottom {
  background: #a3c6ff;
  position: relative;
  z-index:1;
}
Arvind Muthuraman
  • 2,957
  • 1
  • 12
  • 11