堆叠多个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设置在相同的绝对位置。如果您想澄清任何内容，我可以为您更新。