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

我有一个图像，我想动画，它应该幻灯片底部向上的位置。我使用的是Angular 5动画，到目前为止，我的动画效果不错，但不是我想要的那么好。请检查这个，因为它是我所拥有的一个例子

好的，我有两个

div

，高度为50%。顶部的

div

有一个图像（在plunker中表示为一个红方块），设置了

位置：绝对值。
我正在设置此图像（红方块）的动画，使其从下到上显示，但问题是：

我希望图像来自底部，但在底部div之后，它出现在它前面

我尝试了
z-index
，没有成功，想不出原因，想不出另一种听起来不便宜又难看的解决方法

谢谢。
添加位置：相对与z指数一起进入#底部div

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