动画元素总是在顶部忽略z-index值

Question

我正在完成一项学校任务，我正在获取天气数据并显示输出，在后台我想要一些云移动。

我使用CSS3关键帧对云运动进行编码，我的问题是云总是保持在顶部，即使我想要的元素有更高的z-index。

我能够正确地将.forecast设置为position: absolute;，但该元素应保留在屏幕中间，因此我无法使用绝对值。

网站：beta2.sampettersson.com。

Answer 1

尝试位置：相对;对于.forecast div

.forecast {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 5px 5px 5px 5px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    max-width: 300px;
    padding: 2%;
    position: relative;
    width: 80%;
    z-index: 3;
}

Answer 2

如果你只是在源顺序中将#clouds div移动到更高的位置（即在预测div之前），它将自动落在预测div之后。