Html 位置div低于具有绝对位置的div

我有一个容器在我的网站上，这是1024px宽。我把我的div一个接一个地放在里面。但是我想让其中一个填充屏幕宽度，所以我必须使用position:absolute。问题是，当我将下一个div放在它下面时，它将代替绝对定位的div。类似于：

<div style="width: 1024px; margin: 0 auto;">
   <div style="position: absolute; height: 500px;">
   </div>
   <div style="height: 100px;">
      It's at the top of the upper div.
   </div>
</div>

---

如何解决此问题？

尝试位置：相对而非绝对，并将宽度默认设置为100%

默认情况下，div应填充屏幕宽度，因为它的显示为块，并且使用div的默认位置[静态]时默认宽度为100%

但是，如果希望下div在上div之后开始，并且希望继续在上div上使用绝对定位，则也可以将其位置设置为绝对位置，并将top属性设置为上div的高度

<div style="width: 1024px; margin: 0 auto;">
   <div style="position: absolute; height: 500px; top:0; left:0;">
   </div>
   <div style="height: 100px; position:absolute; top:500px; left:0;">
      It's at the top of the upper div.
   </div>
</div>

您的CSS需要如下所示：

section {
display: block;
width: 1024px;
margin: 0 auto;
}

section div:nth-of-type(1) {
height: 500px;
}

section div:nth-of-type(2) {
height: 100px;
}

<section>
<div>
</div>

<div>
Now it's where it should be.
</div>
</section>

您的HTML文件如下所示：

section {
display: block;
width: 1024px;
margin: 0 auto;
}

section div:nth-of-type(1) {
height: 500px;
}

section div:nth-of-type(2) {
height: 100px;
}

<section>
<div>
</div>

<div>
Now it's where it should be.
</div>
</section>

---

什么是动态高度？那么不要使用绝对定位。通过使用静态或相对定位，其他div将自己定位在前一个div的正下方。那么，如果没有绝对定位，如何在1024px容器内创建100%屏幕div？默认情况下，div是其父元素的100%宽度。在您的情况下，div将是1024px。如果希望div位于主体的100%，则将div移到1024px div之外。