这是我的场景:我有几个 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;
}
有什么想法吗?
最佳答案
老实说,我不确定你的描述到底是什么,但我在这里放了一些可能有帮助的代码:https://jsfiddle.net/JTBennett/hksxgncv/1/
这些是你想在这里使用的位置:
position:relative;
position:inherit;
您的两个父 div 设置在完全相同的绝对位置。如果您想澄清任何事情,我可以为您更新。
关于html - 堆叠多个扩展屏幕宽度的div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33491100/