0

我是网络开发的新手。我的容器 div 设置为margin: 0 auto; position: relative;并显示在屏幕中间。我banner在容器中有一个 div，它有一些背景颜色，我想扩展屏幕的整个宽度。我决定在 div 之外使用另一个 div，container其背景颜色和高度与我的bannerdiv 相同，并将其命名为 header。但是我怎样才能把它们放在另一个上面，更准确地说，是containerdiv 放在headerdiv 上？

编辑： 一些html：

<body>
  <div id="header"></div>
  <div id="container">
    <div id="banner">
      <img src="images/banner.gif" width="450" height="80" alt="parul library" />
    </div>
  </div>
</body>

CSS：

#container{
position:relative;
top:0;
width: 968px;
background:#FFF;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
}

#header {
position:absolute;
top:0;
height: 80px;
background: rgb(222,239,255); /* Old browsers */

}
4

1 回答 1

2

尝试将此 CSS 用于标题 div：

.header {
    background: #bada55;
    height: 90px;
    width: 100%;
    position: absolute;
}

并确保容器具有position: relative;其样式定义。

这是一个工作演示：http: //jsfiddle.net/rkJMJ/

Update for the HTML and CSS posted in the question:

(Added width: 100; to the #header style def)

#container{
position:relative;
top:0;
width: 968px;
background:#FFF;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
}

#header {
position:absolute;
top:0;
height: 80px;
width: 100%;
background: rgb(222,239,255); /* Old browsers */
}
于 2012-10-14T19:17:00.457 回答