動畫元素始終位於最上方，而忽略z-index值

Question

我正在做一個學校作業，在那里我要獲取天氣數據並顯示輸出，我希望在后台移動一些雲。

我用CSS3關鍵幀編碼了雲運動，但我的問題是，即使我希望位於頂部的元素具有較高的z索引，雲也始終停留在頂部。

我能得到它的工作正確設置.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之后。