CODEWITHSUNDEEP
cssangularanimationangular5angular-animations
João Ghignatti
João Ghignatti

Reputation: 2391

Absolute image animate behing another div - Angular 5 animation

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.

Upvotes: 4

Views: 234

Answers (1)

Arvind Muthuraman
Arvind Muthuraman

Reputation: 3095

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

#bottom {
  background: #a3c6ff;
  position: relative;
  z-index:1;
}

Upvotes: 4

Related Questions