CSS 分层 Div

Question

我希望 100% 宽的包含图像的 div 位于我的页面下方。在这些 div 之上，我想要一个 1210 像素宽的 div，我可以在其中放置我的内容。

例子: http://mudchallenger.com/a-responsivee.html

问题:我怎样才能让蓝色框接触到绿色框，而红色框保持在两者之上？

谢谢!

我目前有这个:

}
#green{
position: absolute;
float:center;
height: 500px;
width: 100%;
margin: 0 auto;
z-index:1;
background-color: green;
}
#blue{
position: relative;
float:center;
height: 500px;
width: 100%;
margin: 0 auto;
z-index:1;
background-color: blue;
}
#red{
position: relative;
float:center;
height: 800px;
width: 1210px;
margin: 0 auto;
z-index:2;
background-color: red;
}

Answer 1

使用背景图像来完成你想要的。只需堆叠您的 div，它就可以正常工作。如果您希望您的内容跨越两个带有背景图像的容器，那就另当别论了，但是您引用的示例并没有这样做。

这是一个 fiddle ，可以接近您想要的实现。只需将容器背景颜色替换为背景图像，您就会得到想要的内容。

http://jsfiddle.net/CfZu4/

HTML:

<div class="container">
    <div class="content">
    Blah
    </div>
</div>
<div class="container red">
    <div class="content">
    Blah
    </div>
</div>

CSS:

.container{
background-color:#00f;
height:200px;
clear:both;
}
.content{
float:right;
width:40%;
height:150px;
margin-top:20px;
background-color:#0f0;
}
.red{
background-color:#f00;
}