css - 位置或 float - 一个 div 在另一个之下(顶部 div 包含一个固定的导航)

Question

我的 HTML

<div class="header">
    <div class="inner">
            <h1>Meat City</h1>

        <nav>   

    <a href="#">Bacon</a>
    <a href="#">Steak</a>
    <a href="#">Crabs</a>
    <a href="#">Burgers</a>

        </nav>
    </div>
</div>
<div>
        <h4>Paragraph 1</h4>

    <p>Bacon ipsum dolor sit amet meatloaf sirloin chuck, strip steak fatback beef ribs doner salami. </p>
</div>
<div>
        <h4>Paragraph 2</h4>

    <p>Shankle beef ribs bacon pancetta, kielbasa landjaeger andouille boudin.  </p>
</div>

我的 CSS

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #f6f6f6;

    height: 150px;

    border:1px;
    border-color:green;
    border-style:solid;
}

http://jsfiddle.net/awozkq5p/3/

在弄清楚如何使用 float 和/或位置将一个 div 堆叠在另一个上时遇到一些困难。

现在我的包含固定导航的 div 与我的第一段重叠。我不希望导航掩盖第一段。我希望第一段在固定导航之后开始。

我一直在阅读关于让所有 div 都 float :左，但这似乎对我的情况不起作用。

Answer 1

position:fixed 和 position:absolute 将始终与您的内容重叠。

您可以添加 margin-top 属性来完成这项工作。示例:

div.header + div {
    margin-top:150px;
}