0

私はウェブ開発の初心者です。私のコンテナdivはに設定されてmargin: 0 auto; position: relative;おり、画面の中央に表示されています。banner画面の幅全体を拡張したい背景色を持つコンテナー内に div があります。containerdiv と同じ背景色と高さのdiv の外側に別の div を使用することにしbanner、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

ヘッダー div に次の CSS を使用してみてください。

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

そして、コンテナがposition: relative;そのスタイル定義に含まれていることを確認してください。

これが実際のデモです: http://jsfiddle.net/rkJMJ/

質問に投稿された HTML と CSS の更新:

width: 100;( #header スタイル定義に追加)

#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 に答える