如何訂購背景圖片？

Question

HTML標記中有兩個圖像：'.map-teaser-container'和'.wave'。換句話說，地圖預告片首先出現並在波後出現。 問題是，在一個頁面上，它們呈現出反過來：首先是波浪，然後是地圖預告。 這怎麼可能？如何解決它？ https://jsfiddle.net/rinatoptimus/byhqkw0q/

.map-teaser-container { 
    position: absolute; 
    width: 100%; 
    height: 600px; 
    background: url('http://www.metsawood.com/PublishingImages/PlanB/Extension-building/city-above-the-city-architects-competition-plan-b.jpg?RenditionID=28') no-repeat; 
    background-size: contain; 
} 
.wave { 
    position: absolute; 
    width: 100%; 
    height: 323px; 
    background: url('https://abc-accelerator.com/wp-content/uploads/2015/05/abc-smart-cities.jpg') no-repeat; 
} 

Answer 1

在你的代碼只需翻轉<div> S的順序。

Updated fiddle

Answer 2

如果你想要把一個元素在另一個（反之亦然）的前只需使用z-index屬性。將更高的z-index應用於您想要的元素。例如，對於.map-teaser-container要高於.wave，可使用z-index: 2;,.map-teaser-container和z-index: 1;的.wave。

Updated fiddle

Answer 3

解決 我除去包裝分度位置：相對&添加樣式到我的塊：

margin-top: -3px; 
    //position: absolute; 
    width: 100%; 
    background-size: contain; 

    max-height: px; 
    position: relative; 
    padding-top: %; 
    background-position: center; 

}