所以我现在正在编写我的网站,我正在使用两个 div 在背景中创建某种渐变,其中 div#bg1 为灰色,div#bg2 为深灰色。但是当我添加包装器 div 时,bg1 和 bg2 仍然遵循包装器的顶部对齐方式,但它不应该。 bg1 和 bg2 应该留在顶部。
这是 html:
<div id="bg1"> </div>
<div id="bg2"> </div>
<div id="wrapper"></div>
和样式表:
div#wrapper {
background-color: #FFFFFF;
width: 800px;
height: 1000px;
margin-left:auto;
margin-right:auto;
margin-top: 30px;
position: relative;
z-index:3;
}
div#bg1 {
width: 100%;
margin:0px;
padding:0px;
height: 200px;
background-color: #ccc;
z-index: 2;
position: absolute;
box-shadow: inset 0px 10px 60px 0px rgba(0, 0, 0, 0.6);
}
div#bg2 {
width: 100%;
margin:0px;
padding:0px;
height: 100px;
background-color: #444444;
z-index: 2;
position: absolute;
box-shadow: inset 0px 10px 60px 0px rgba(0, 0, 0, 0.7);
}
目前我的网站上有代码:http://andreassvarholt.com/test/test3/
最佳答案
您已将两个 BG div 设置为绝对位置。
要强制它们到顶部,您需要定义“top”CSS 属性。
div#bg1 {
top: 0;
}
div#bg2 {
top: 0;
}
此外,我必须指出您的实现不够优雅。只需制作一个 1px x 200px 的图像作为背景图像平铺在 body 上。仅仅为了一个简单的背景效果而将 div 堆叠在 div 之上是没有意义的。
关于html - wrapper 下的两个 div 跟随 wrapper div 的 margin-top 值,它不应该,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12061696/