包装器下面的两个div遵循包装器div的margin-top值,它不应该

时间:2012-08-21 19:27:33

标签: html css

所以我现在正在编写我的网站,我正在使用两个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/

2 个答案:

答案 0 :(得分:0)

您将两个BG div设置为绝对位置。

要强制它们到顶部,您需要定义“顶部”CSS属性。

  div#bg1 {
    top: 0;
  }

  div#bg2 {
    top: 0;
  }

此外,我必须指出你的实施不够优雅。只需制作1px乘200px的图像,将图像作为背景图像贴在身体上。在div上叠加div是没有意义的,仅仅是为了简单的背景效果。

答案 1 :(得分:0)

使用div来创建背景渐变有点怪。为什么不去网上提供的众多免费css3梯度发生器之一。自由自在。

祝你好运 -Brian