绝对定位的 div 不会推动其他内容向下

Question

我的大部分代码都在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;
}

- user3608238

---

请在此处发布您的HTML和CSS，而不是链接到您的网站，现在和将来都是如此。 - TylerH

我在这里链接了网站，因为我无法将问题分解为几行代码。我感觉复杂性需要更多HTML/CSS/JS的部分。 - user3608238

将z-index设置为类似于999的值。 - Victor

已解决...请看下面的答案。 - MilkyTech

Answer 1

绝对定位不会推动容器向下，而是根据z-index的设置放置在它们的上方或下方。你需要将绝对定位的内容包含在一个相对定位的容器中，以使其他容器向下移动，类似于jquery滑块中的容器。

- Mayank Tripathi

Answer 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;
}

- MilkyTech

---

这太糟糕了！我的小提琴似乎被黑客攻击了。在我的jsfiddle账户中，它现在被标记为垃圾邮件，并且代码被替换为(function(i){var e=/iPhone/i,n=/iPod/i,o=/iPad/i,t=/(?=.*\bAndroid\b)(?=.*\bMobile。 - MilkyTech

Answer 3

绝对定位的正确功能是重叠内容。如果您想让其他内容自动向下推，则使用“相对”位置。

- KnightHawk

---

将#detailsbox设置为position: relative仍然存在相同的问题。 - user3608238

@user3608238 虽然Joseph的回答不是最好的，但他的观点是正确的，即position: absolute;会将元素从常规内容流中移除。就像你的网站存在于一个平面上，而绝对定位的元素则漂浮在其上方。 - TylerH

Answer 4

解决方法是创建一个带有 float right 或 left 的空白间隔 div。这将确保两者之间有空间。 参考此答案

- Shashank Reddy Arrabothu

Answer 5

你可以在page1和page2之间添加另一个空白部分，并使用以下CSS代码：height: 100%;。

- Ozgu Ozden

Answer 6

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

你可能想要查看此内容。

是否使用绝对定位取决于你尝试实现的设计。使用默认（也称为“静态”）或相对定位将把其他内容推到白色框下面，但没有一个设计来参考，很难确定这是否是真正的解决方案。

- d512

Answer 7

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

- WOLF CRECENT