绝对位置 div 不会将其他内容向下推

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

http://jsfiddle.net/MilkyTech/suxWt/ 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;
}

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