Wie kann ich Hintergrundbilder bestellen?

Question

Es gibt zwei Bilder im HTML Markup: '.map-teaser-container' und '.wave'. Mit anderen Worten, Map-Teaser kommt zuerst und nachdem es Wellen geht. Das Problem ist, dass auf einer Seite sie umgekehrt gerendert werden: zuerst kommt Welle und dann Map-Teaser. Wie ist es möglich? Wie man es repariert? 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

einfach drehen Sie die Reihenfolge der <div> s in Ihrem Code.

Updated fiddle

Answer 2

Wenn Sie ein Element vor einem anderen (oder umgekehrt) setzen wollen nur verwenden, um die z-index Eigenschaft. Wenden Sie eine höhere z-index auf das Element, das Sie möchten, an. Zum Beispiel kann für .map-teaser-container über .wavez-index: 2; in .map-teaser-container und z-index: 1; in .wave verwendet werden.

Updated fiddle

Answer 3

GELÖST Ich entfernte Wrapper div mit position: relative & Arten hinzugefügt meine Blöcke:

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

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

}