Css 坐在另一个沙发里？_Css_Html_Position_Stylesheet

Css 坐在另一个沙发里？

css html

Css 坐在另一个沙发里？,css,html,position,stylesheet,Css,Html,Position,Stylesheet,我希望我的“header”div位于“container”div内。目前，“header”div位于“container”div上方，我似乎无法将其放入其中。下面是代码。谢谢你的帮助 HTML: <body> <div id="container"> <div id="header"> <h1>Title Goes Here</h1> </div> &l

我希望我的“header”div位于“container”div内。目前，“header”div位于“container”div上方，我似乎无法将其放入其中。下面是代码。谢谢你的帮助

HTML:

<body>
<div id="container">
        <div id="header">
            <h1>Title Goes Here</h1>
        </div>    
    </div>
</body>

#body {
    background-color: #CCC;
}

#container {
    width: 960px;
    height: 800px;
    background-color: #666;
    margin: 0 auto 0 auto;
}

#header {
    position: relative;
    width: 956px;
    height: 100px;
    background-color:#FFF;
    border-style: solid;
    border-color: #F00;
    border-width: 2px;
    text-align: center;
    line-height: 3em;
}

它在里面。删除标题上的背景色，您将看到后面的容器背景。

它位于容器内部，只是由于颜色的原因，看起来它位于顶部。打开您喜欢的w/e浏览器工具，查看容器分区。

它在您的容器中。添加填充或删除背景将使其更可视

将“背景色”设置为“透明”或只是暂时将其删除，您将看到标题位于其中

通过查看您发布的代码，标题位于容器内部。在标题上方和下方添加一些文本，您将看到

#body {
    background-color: #CCC;
}

#container {
    width: 960px;
    height: 800px;
    background-color: #666;
    margin: 0 auto 0 auto;
    padding:20px;
}

#header {
    position: relative;
    width: 956px;
    height: 100px;
    background-color:#FFF;
    border-style: solid;
    border-color: #F00;
    border-width: 2px;
    text-align: center;
    line-height: 3em;
}