html - 动画元素总是在顶部忽略 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。