除非绝对定位，否则标题不会显示

Question

我有点问题，我认为这可能是我对绝对定位缺乏了解。

我有一个div为标题的全尺寸并设置为“background：cover”。它被设定为100％宽度和90％高度。但是，除非我将其设置为“position：absolute”，否则不会显示背景。

除此之外，还有另一个div表现良好，无论是否指定了位置。

我确信这可能只是我对立场缺乏了解，但我无法深究它。

这是header-div的CSS及其顶部的内容。

#header-image {
    background: url(bg.jpg) no-repeat center center fixed #b6eedd;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      width: 100%;
      height: 90%;
      top: 0;
      left: 0;
      position:absolute;
      z-index: -999;
      display: block;
      float: left;
}


#front-content {
    margin-top: 3%; 
}

#front-content  {
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    margin-bottom: 0;
    color: #f70035;
    z-index: 1;
    height: 90%;
    position: relative;
} 

感谢您的帮助。

在jsfiddle上 - http://jsfiddle.net/SpeshalCrayon/nmc5X/6/