绝对图像动画behing另一个div - Angular 5动画

Question

我有一个想要制作动画的图像，它应该从底部向下滑动到它的位置。我使用Angular 5动画，到目前为止我的动画效果很好，但不是我想要的那样。请查看此Plunker，因为它是我所拥有的一个示例。

好的，我有两个div与height: 50%。顶部div有一个图像（在plunker中表示为红色方块），设置为position: absolute。 我将此图像（红色方块）设置为动画从下到上显示，但问题是：

我希望图片来自底部，但是底层div ，它就在它前面。

我试过z-index，没有工作，找出原因，无法想到另一种听起来不像是廉价而丑陋的解决方法。

感谢。

Answer 1

将位置：相对; 和z-index添加到#bottom div。

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