html - 如何将一个 div 始终置于另一个 div 之上？ (不是叠加!)

Question

我怎样才能将 div#sky 定位在 div#house 之上，而 img#roof 总是在底部div#sky?

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

House should awalys 的纵横比为 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

position the div#sky always exact above the div#house

自然流表明情况已经如此

while the img#roof is always on the bottom of div#sky

将 bottom: 0.2vw; 替换为 top: 100%;。然后将position:relative;添加到div#sky。 top 值很容易解释。它会将您的 #roof 元素的顶部放置在其偏移父元素的上边缘与其偏移父元素高度的 100% 处。向 #sky 添加相对定位使其成为 #roof 的偏移父级。

div#plot must be always on the bottom of the browser as well.

你已经把那部分记下来了(呵呵......没有双关语的意思)。

The House should awalys has an aspect ratio of 1:1.09 and positioned at the bottom of the browser.

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