绝对位置 div 不向下推其他内容答案

【问题标题】：Absolute Position div not pushing other content down绝对位置 div 不向下推其他内容
【发布时间】：2020-12-08 23:04:27
【问题描述】：

我的大部分代码都在一个 jsFiddle 中：

http://jsfiddle.net/MilkyTech/suxWt/

内容应该加载到第一页的白框中，溢出的内容会向下推页面的以下部分。但是，可以看出，下部加载在第一页白框的顶部。我已尝试更改各个部分的定位/清除，但似乎无法创建必要的移动。

<section class="page1">
<div class="huge-title centered">  
    <div id='detailsbox'>
    <h1 id='eorvtitle'></h1>
    <img id='eorvimage' src=''>
        <div><p>lots of text lots of text                   
        </div>
    </div>
</section>
<section class="page2" id='page2'>
</section>

.page1 { 
    background: url('../img/bg.jpg')#131313;
    background-size: cover;
    height: 100%;
    position: relative;
}
.huge-title {
    position: absolute;
    top: -20%;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 180px;
}
#detailsbox {
    top: -4em;
    width: 75%;
    left: 12.5%;
    right: 12.5%;
    border: 20px solid white;
    border-radius: 10px;
    background-color: white;
    text-align:center;
    position: absolute;
    float: left;
    clear: both;
}

【问题讨论】：

请在此处发布您的 HTML 和 CSS，而不是链接到您的网站，以供现在和将来参考。
我在这里链接了网站，因为我无法将问题隔离到几行。我觉得复杂性需要更多的 HTML/CSS/JS 部分
将 z-index 设置为 999 之类的东西
已解决...看看我下面的答案。

标签： html css

【解决方案1】：

绝对定位不会将容器向下推。它根据 z 索引将自己置于它们之上或之下。您需要将绝对内容包含在相对容器中，以将其他容器向下推，类似于 jquery 滑块中的容器。

【讨论】：

【解决方案2】：

您需要将.huge-title 和#detailsbox 更改为position:relative;
你可能可以摆脱background-size: cover;
还将.huge-title 和#detailsbox 更改为以下内容：

.page1 {
  background: url('../img/bg.jpg')#131313;
  height: 100%;
  position: relative;
}
.huge-title {
  position: relative;
  top: 20%;
  right: 0;
  left: 0;
  margin: auto;
  height: 100%;
}
#detailsbox {
  top: -4em;
  width: 75%;
  left: 12.5%;
  right: 12.5%;
  border: 20px solid white;
  border-radius: 10px;
  background-color: white;
  text-align: center;
  position: relative;
  float: left;
  clear: both;
}

【讨论】：

这太糟糕了！我的小提琴不知何故被黑了。在我的 jsfiddle 帐户中，它现在被标记为垃圾邮件，代码被替换为 (function(i){var e=/iPhone/i,n=/iPod/i,o=/iPad/i,t=/(?=.*\bAndroid\b)(?=.*\bMobile

【解决方案3】：

绝对位置的正确功能是重叠内容。如果您希望其他内容自动下推，请使用relative 位置。

【讨论】：

将#detailsbox 设置为position: relative 仍然存在同样的问题
@user3608238 虽然约瑟夫的回答不是最好的，但重点在于position: absolute; 从常规内容流中删除了一个元素。就好像您的网站位于一个存在平面上，而绝对定位的元素漂浮在其上方。

【解决方案4】：

解决方案是创建一个左右浮动的空白分隔 div。这将确保两者之间有空间。 Refer this answer

【讨论】：

【解决方案5】：

绝对定位元素从 HTML 的主要流程中移除。这就是为什么它没有将其下方的元素向下推。它现在位于它之前和之后的元素之上，而不是它们之间。

您可能想check this out。

如果没有看到您尝试实施的设计，很难说绝对定位在您的情况下是否有意义。使用默认（又名“静态”）或者可能是相对定位会将其他内容推到白框下方，但如果不考虑看，很难判断这是否是真正的解决方案。

【讨论】：

【解决方案6】：

您可以在 page1 和 page2 之间添加另一个空白部分并在下面给出 css

身高：100%；

【讨论】：

【解决方案7】：

在绝对实体和其他组件之间添加一个绝对实体大小的空 div 可能会有所帮助。

【讨论】：