html - 两个 div 彼此重叠，第三个在它们之后

Question

我有这样的布局:

  <div id="content">
    <div id="foreground">
    </div>
    <div id="background">
    </div>
  </div>
  <div id="footer">
  </div>

我需要在前景 div 下显示背景 div，这是我使用 position:absolute 完成的，它工作正常。

问题是在设置了前景和背景绝对位置后，它们脱离了正常流，父 div(内容)没有实际宽度，这搞砸了页脚位置。

#background
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}
#foreground
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:1;
}
#content
{
    position:relative;
}
#footer
{
    position:relative;
}

内容宽度是动态的，所以我不能为页脚设置绝对位置，我真的很想避免一些 javascript hack，有什么解决办法吗？

Answer 1

我会这样做:

HTML:

<div id="content">
    <div id="foreground">
        Row 1<br>
        Row 2<br>
        Row 3<br>
        Row 4
    </div>
    <div id="background">
    </div>
</div>
<div class="clear"></div>
<div id="footer">
    The footer
</div>

CSS:

#background
{
    float: left;
    background-color: #ff0;
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
    width: 100%;
    height: 100%;
    display: block;
}
#foreground
{
    float: left;
    z-index:1;
}
#content
{
    position:relative;
    border: 1px solid #f00;
    float: left;
    width: 100%;
}
#footer
{
    border: 1px solid #f0f;
    position:relative;
    width: 100%;
}
.clear
{
    clear: both;
}

fiddle :http://jsfiddle.net/4LSZK/