另一个 div 后面的绝对图像动画 - Angular 5 动画

Question

我有一张想要制作动画的图像，它应该从底部向上滑动到它的位置。我正在使用 Angular 5 动画，到目前为止我的动画效果很好，但并不完全符合我的要求。请检查此Plunker，因为它是我所拥有的示例。

好的，我有两个div 和height: 50%。顶部的div 有一个图像（在plunker 中表示为红色方块）设置为position: absolute。 我正在为这张图片（红色方块）设置动画，使其从下到上出现，但问题是：

我希望图像来自底部，但要位于底部 div 并且它位于它的前面。

我尝试了z-index，但没有成功，找出原因，想不出另一种听起来不像便宜又丑陋的解决方法。

谢谢。

Answer 1

将 position: relative; 与 z-index 一起添加到 #bottom div。

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