Absolute Position div not pushing other content down

Question

Most of my code in a jsFiddle:

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

The content should load on the first page in a white box, with overflowing content pushing the following sections of the page down. However, as can be seen the lower sections load over the top of the first page white box. I have tried changing the positioning/clears of the various sections but cannot seem to create the necessary movement.

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

Answer 1

Absolute Positioning does not push containers down. It places itself above or below them based on the z-indexing. You need to enclose your absolute contents inside a relative container to push other containers downwards similar to those in jquery sliders.

Answer 2

you need to change .huge-title and #detailsbox to position:relative;
you can probably get rid of background-size: cover;
also change .huge-title and #detailsbox to the following:

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