CSS分层div

我希望100%宽的div包含图像进入我的页面。 在这些div之上，我想要一个1210px宽的div，在那里我可以放置我的内容

例如：

问题: 我怎样才能让蓝色的盒子接触到绿色的盒子，而红色的盒子保持在两个上面

谢谢大家!

我目前有：

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

---

编辑：小提琴的缩小版本：

HTML:

---

再次编辑：删除了无效的css规则。

使用背景图像来完成您想要的。只要把你的div叠起来就行了。如果你想让你的内容跨越两个有背景图片的容器，那是另一回事，但是你举的例子没有做到这一点

这里有一把小提琴，接近你想要的实现。只需将容器背景色替换为背景图像，就可以得到所需的内容

HTML:

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

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

---

听起来你真正想要的是背景图像…@Malcoda-从某种意义上说，是的。水平分布的多个背景。我真的希望我的页面看起来像这样。。。但由于某些原因，我的css在ipad上被提升了。在桌面上看起来不错，但我需要把所有东西都包装在一个容器中，然后把它放在那些水平div的顶部。有什么建议吗？我猜页面只是在屏幕上的容器div上使用背景图像，然后将内容放在这些容器div中。内容没有覆盖整个container div，因此呈现出所需的外观。谢谢。但要回答我的问题，人们会如何让盒子接触？哈哈。。。我在这里遗漏了一些东西，我敢肯定@马尔科达感谢你的帮助！这是我的两个问题之一。我昨晚发布的第二个问题，但没有得到太多帮助。你能看一下吗？非常感谢。没有浮动的东西：中心；是的，很抱歉我使用了OP的css，只是简单地移动了一些东西。

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

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