固定的页眉，DIV 后面而不是下面

Question

如果有人能帮我解决一个小问题，我会很感激。可能是我太蠢了，但是我似乎无法让我的DIV在固定的标题下面显示，因为它目前是在后面。

</body>
    <div id="container">
        <div id="header">
        </div>
        <div class="home">
            <img src="images/home.jpg" alt="" height="563" width="760">
        </div>
    </div>
</body>

body {
    text-align: center;
}

#container {
    width: 760px;
    margin-left: auto;
    margin-right: auto;
}

#header {
    padding-top: 250px;
    position: fixed;
    background-image: url(images/logo.png);
    background-repeat: no-repeat;
    background-position: 50% 40%;
}

.home {
}

编辑：另外需要注意的是，在标题中有一个基本的CSS菜单，我认为这个代码对于这个问题并不必要。

- user1692620

Answer 1

使用绝对/固定定位会使 div 元素脱离文档流。如果你想让 .home 在页眉下面显示，你需要给它设置一个与页眉相同高度的 margin-top。

- scottlimmer

---

有趣的是我认为这是问题所在，然后进行了修复。刚刚尝试了一下，将margin-top应用到home时，#header也会向下移动。这没有任何意义。但是padding-top不会出现这种情况，为什么会这样呢？ - user1692620

我认为最好不要使用margin-top，因为Firefox会将margin-top的值加倍。另一种选择是使用padding-top代替margin-top，并使用相同的值。或者您可以在.home之前添加一个空元素，并将其宽度设置为与.home相同+高度为250px。但如果可能的话，我更喜欢使用padding-top来防止使用不必要的元素。 - PcPulsar