html - 堆叠多个扩展屏幕宽度的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;

您的两个父 div 设置在完全相同的绝对位置。如果您想澄清任何事情，我可以为您更新。