堆叠屏幕的多个div延伸宽度

Question

这是我的场景：我有几个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; 

你的两个父divs设置在相同的确切绝对位置。如果你想澄清任何事情，我可以为你更新它。