绝对图像动画在另一个 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;
}