Question

为了简短起见，这就是问题的例子。

看到标题后面第一段消失了

HTML

<div id='header'>
    <div id="div_1">
        <p>hello</p>
    </div>
    <div id= "div_2">
        <p>hello</p>
    </div>
</div>
<div id='body'><p>why this goes behing previous div?</p>
    <p>why this goes behing previous div?</p>
    <p>why this goes behing previous div?</p>
</div>

的CSS：

#header {
    position: fixed;
    top: 0px;
    height: 50px;
    width: 100%;
    background: green;
}
#div_1 {
       margin: 0 auto;
}

#div_2 {
    margin: 0 auto;
}
#body{ margin-top: 30px; height: 3000px; overflow: auto; }

提前致谢

Answer 1

因为您将身体的边距设置为30，将标头的高度设置为50px。

Answer 2

因为#body (margin-top:30px)不足以清除标头。增加保证金值以推卸第一段。

我希望这会有所帮助

Answer 3

给予某些位置：固定;将导致该元素固定到您将其放置在浏览器中的任何位置。由于您的段落div没有任何位置样式，标题将放在它的顶部。

如果给出每个元素的位置：relative;他们会叠加在一起。

#header {
    position: relative;
    top: 0px;
    height: 50px;
    width: 100%;
    background: green;}
#body{ height: 3000px; overflow: auto;position:relative; }

Example in fiddle.

CSS标题位置：固定导致body div消失

3 个答案: