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

Question

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

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

我希望图像来自底部，但在底部 div 之后并且它在它前面。

我尝试了 z-index，但没有用，找出原因，想不出另一种听起来不像是廉价而丑陋的解决方法。

谢谢。

Answer 1

将 position: relative; 和 z-index 添加到 #bottom div。

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