我怎样才能将div放在另一个div之上？ （没有覆盖！）

Question

如何将div#sky始终精确定位在div#house之上，而img#roof始终位于div#sky的底部？

div#plot也必须始终位于浏览器的底部。

The House应该是宽高比为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#sky始终精确定位在div#house

之上

自然流动表明已经是这种情况

  

虽然img#roof始终位于div#sky

的底部

取自bottom: 0.2vw;并将其替换为top: 100%;。然后将position:relative;添加到div#sky。 top值非常自我解释。它会将#roof元素的顶部放置在其偏移父级的上边缘100％的偏移父级高度上。向#sky添加相对定位使其成为#roof的偏移父项。

  

div#plot也必须始终位于浏览器的底部。

你已经把那部分放下了（嘿嘿......没有双关语）。

  

The House应该是宽高比为1：1.09，位于浏览器的底部。

这部分可能是一个问题，但由于缺乏可靠的演示而难以分辨。你有一个演示，但它有一些问题。它在#sky元素中没有任何内容，因此我不知道“天空”是图像元素，背景图像还是简单的颜色。

Answer 2

可能的解决方案是使用flexbox样式动态调整天空高度。几乎就像一个圣杯＆＃39;页脚总是被推到页面底部的布局。

css摘录（参见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;
}

在这个例子中，身体是主要容器，我不会将图像用于屋顶或房屋 - 只需要css背景颜色和边框三角形。但它证明了这一概念。