divを常に別のdivの上に配置するにはどうすればよいですか？

Question

div#skyの位置は、div#houseの上に常に正確に配置できますが、img#roofは常にdiv#skyの下にありますか？

div#plotは常にブラウザの下部にある必要があります。

ハウスは、アスペクト比が1：1.09で、ブラウザの下部に配置する必要があります。

その家の上に屋根を置いてください。

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%; 
} 

例： http://www.kunkel-dienstleistungen.com/dev/

Answer 1

位置は常に正確なdiv#house

上記

自然な流れはimg#roofがbottom: 0.2vw;のdiv#sky

テイクの下に常にあるとtop: 100%;と交換しながら、それはすでに

場合であることを指示します。次にposition:relative;をdiv#skyに追加します。 topの値はかなり自明です。それはあなたの#roof要素の上端をそのオフセットの親の高さの100％をそのオフセットの親の上端から置きます。 #skyに相対位置を追加すると、#roofのオフセットの親になります。

div#plotは常にブラウザの下部にある必要があります。

あなたはその部分を持っています（hehe ... no punを意図しています）。

ハウスは、アスペクト比が1：1.09で、ブラウザの下部に配置する必要があります。

この部分は問題である可能性がありますが、デモが不足していると言っても過言ではありません。デモがありますが、いくつかの問題があります。 #sky要素には何も含まれていないので、「空」が画像要素、背景画像、または単純な色になるかどうかはわかりません。

Answer 2

可能な解決策は、フレックスボックススタイルを使用して空の高さを動的に調整することです。フッターが常にページの一番下にプッシュされる「聖杯」レイアウトに似ています。ちょうどCSSの背景色とボーダー三角 -

CSSの抜粋体が主なコンテナであると私は屋根や家のための画像を使用していない。この例では

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; 
} 

（jsfiddle for a complete exampleを参照してください）。しかしそれは概念を実証しています。