堆叠多个扩展屏幕宽度的div

Question

下面是我的场景：我有几个div必须堆叠在一起。每个div都有一个背景颜色（或纹理）。每个div都嵌套了另一个div。父div的颜色或纹理扩展了整个屏幕的宽度。

问题：添加第二个div时，它会出现在第一个div的上方。

查看我在以下位置谈论的内容：http://staging.ontempoideas.com/bvcil

它看起来像这样。。。

HTML:

<div id="1P">
<div id="1C">
</div>
</div>
<div id="2P">
<div id="2C">
</div>
</div>

CSS：

#1P {
position: absolute;
left: 0;
right: 0;
background-color: blue;
}
#1C {
width: 920px;
margin-left: auto;
margin-right: auto;
}
#2P {
position: absolute;
left: 0;
right: 0;
background-color: green;
}

有什么想法吗？

Answer 1

老实说，我不确定你的描述中到底想要什么，但我在这里放了一些代码，可能会有所帮助：https://jsfiddle.net/JTBennett/hksxgncv/1/

这些是你想在这里使用的职位：

position:relative;
position:inherit;

您的两个父div设置在相同的绝对位置。如果你想澄清什么，我可以帮你更新。