Wie kann ich ein Div immer über einem anderen div positionieren? (nicht überlagernd!)

Question

Wie kann ich die div#sky immer exakt über die div#house positionieren, während die img#roof immer auf der Unterseite div#sky steht?

div#plot muss immer auch auf der Unterseite des Browsers sein.

Das Haus sollte ein Seitenverhältnis von 1: 1,09 haben und am unteren Rand des Browsers positioniert werden.

Oberhalb dieses Hauses sollte das Dach platziert werden.

HTML:

<div id="main"> 
    <div id="sky"> 
     <img id="roof" src="img/roof.png" alt="roof"> 
    </div> 
    <div id="plot"> 
     <div id="house"> 
     </div> 
    </div> 
</div> 

CSS:

div#main { 
    border-bottom: 1px solid dimgray; 
    height: 90%; 
    margin: 5vh auto; 
    padding: 0; 
    position: fixed; 
    width: 100%; 
} 
div#sky { 
    background: white; 
    height: auto; 
    margin: 0 auto; 
    padding: 0; 
    width: 100%; 
    z-index: 1; 
} 
div#plot { 
    bottom: 0; 
    height: auto; 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    width: 100%; 
} 
div#house { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    border-left: 2.4vw solid black; 
    border-right: 2.4vw solid black; 
    height: 0; 
    margin: 0 auto; 
    padding-bottom: 25.844%; 
    position: relative; 
    width: 33.2%; 
} 
img#roof { 
    bottom: 0.2vw; 
    height: auto; 
    left: 30%; 
    margin: 0 auto; 
    padding: 0; 
    position: absolute; 
    width: 40%; 
} 

Beispiel: http://www.kunkel-dienstleistungen.com/dev/

Answer 1

Position der div#sky immer genau über die div#house

natürlicher Fluss schreibt vor, dass das schon der Fall ist

während die img#roof immer auf dem Boden der

div#sky ist

Nehmen von bottom: 0.2vw; und ersetzen sie durch top: 100%;. Fügen Sie dann position:relative; zu div#sky hinzu. Der top Wert ist ziemlich selbsterklärend. Dadurch wird der obere Teil Ihres Elements #roof zu 100% der Höhe des übergeordneten Offsets von der oberen Kante des Offset-Parents entfernt. Wenn Sie die relative Positionierung zu #sky hinzufügen, wird sie zum übergeordneten Offset von #roof.

div#plot muss immer auch auf der Unterseite des Browsers sein.

Sie haben diesen Teil (hehe ... kein Wortspiel beabsichtigt).

Das Haus sollte awalys hat ein Seitenverhältnis von 1: 1.09 und am unteren Rand des Browsers positioniert.

Dieser Teil kann ein Problem sein, aber es ist zu schwer zu sagen, mit dem Fehlen einer soliden Demo. Sie haben eine Demo an Ort und Stelle, aber es hat ein paar Probleme. Es hat nichts in dem Element #sky, so weiß ich nicht, ob der "Himmel" ein Bildelement, ein Hintergrundbild oder eine einfache Farbe sein wird.

Answer 2

Mögliche Lösung ist die Verwendung von Flexbox-Stilen, um die Höhe dynamisch anzupassen. Fast wie ein "heiliger Gral" -Layout, bei dem die Fußzeile immer an den unteren Rand der Seite gedrückt wird.

CSS-Auszug (siehe jsfiddle for a complete example)

body { 
    display: flex; 
    flex-direction: column; 

    height: 100% 
} 
#sky { 
    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
    flex: 1 0 auto; 
    background-color: #0080ff; 
} 
#plot { 
    display: flex; 
    justify-content: center; 
    flex: 0 0 auto; 
    background-color: #808040; 
} 

In diesem Beispiel ist der Körper die Hauptbehälter und ich Bilder nicht für das Dach oder das Haus nutzen - nur CSS Hintergrundfarbe und ein Grenzdreieck. Aber es zeigt das Konzept.