Html <；第节>；背景彼此分开/重叠

我正在尝试创建一个包含几个不同部分的登录页，如。我在HTML中完成了以下操作：

    <section class="payroll">
      <p>
        This is the Payroll Section
      </p>
    </section><!-- END class="payroll" -->  

    <section class="pos">
      <p>
        This is the Point of Sale Section
      </p>
    </section><!-- END class="pos" -->

问题是这些部分彼此分离，在它们之间留下了很大的间隙。见图。如果收缩窗口或检查元素，则各部分会上浮，以相互重叠

有什么想法吗？谢谢

---

创建一个.wrapper div并使用它：

.wrapper {
width:100%; /* you can define as you want */
height:100%; /* you can define as you want */
position:relative;
}
.payroll {
background-image: url('../img/payroll_bg.jpg');
background-repeat: repeat-x;
height: 100%;
position:absolute;
top:0;
left:0;
width:0 auto;
}
.pos {
background-image: url('../img/pos_bg.jpg');
background-repeat: repeat-x;
height: 100%;
position:absolute;
top:0;
left:0;
opacity:0.9;
width:0 auto;
}

---

我认为这个问题是由你100%的身高造成的。您需要在父元素上设置一个高度，因为任何百分比标注都是基于父元素的大小

---

如您所做的那样，远离百分比也会起作用。

您应该确保您的

部分没有应用任何边距。

s.没有添加边距。这也不能解释当浏览器窗口缩小时，各个部分互相浮动的原因。我认为问题是由你100%的身高造成的。是否在包含两个

节的父元素上设置了高度？在父元素上没有设置高度。我将高度：100%更改为581px，即bg图像的大小，这解决了问题。我想不出这会影响站点响应的原因。这可以很好地将各个部分推到一起，但如果我添加绝对位置，bg图像会重叠，这是我不想要的。我更改了高度：100%为bg图像的实际高度，这似乎解决了问题。感谢您的解释。你完全正确。我仍然在想在哪里使用百分比是合适的，在哪里我需要明确说明大小。不用担心-百分比确实有它们的用途，但在我的经验中主要是宽度。
.wrapper {
width:100%; /* you can define as you want */
height:100%; /* you can define as you want */
position:relative;
}
.payroll {
background-image: url('../img/payroll_bg.jpg');
background-repeat: repeat-x;
height: 100%;
position:absolute;
top:0;
left:0;
width:0 auto;
}
.pos {
background-image: url('../img/pos_bg.jpg');
background-repeat: repeat-x;
height: 100%;
position:absolute;
top:0;
left:0;
opacity:0.9;
width:0 auto;
}