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黑客攻击，这有什么解决方案吗？

Answer 1

是否有理由不能在#content上设置高度？所以，像这样：

#content {
    border: 1px solid red;
    position: relative;
    height: 200px;
}

#foreground {
    position: absolute;
    top: 50px;
    height: 100px;
    width: 100%;
    background: yellow;
    z-index: 2;
}

#background {
    position: absolute;
    height: 100px;
    width: 100%;
    background: red;
    z-index: 1;
}

#footer {
    border: 1px solid red;
}

这是一个小提琴：http://jsfiddle.net/DuWRe/1/

（我添加了一些边框和背景，因此可以轻松识别每个元素的位置。）

Answer 2

我会这样做的：

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

小提琴：http://jsfiddle.net/4LSZK/

两个div在彼此之上，而在他们之后排在第三位

2 个答案: