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

Question

我正在做一项学校作业，我在其中获取天气数据并显示输出，在背景中我想要一些云在四处移动。

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

我能够将 .forecast 设置为 position: absolute; 使其正常工作，但该元素应位于屏幕中间，因此我不能使用 absolute在那一个上。

网址:beta2.sampettersson.com .

Answer 1

尝试position:relative；对于 .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;
}