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/

难以弄清楚如何使用浮点数和/或位置将一个div叠加到另一个div上。

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

我一直在阅读让所有div浮动：左，但这似乎不适用于我的情况。

Answer 1

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

您可以添加margin-top属性来完成此工作。例如：

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

Answer 2

要将div叠加在一起，您可以将 z-index 属性与位置或显示属性结合使用。

分层div：

|---------|
|         |
|  |----------|
|  |          |
|--|          |
   |          |
   |----------|

要在页面上垂直堆叠div，一个在另一个下面，只需删除 position：fixed 属性即可。默认情况下，div将填充父容器中的可用空间并垂直堆叠。一旦你开始摆弄宽度，位置，浮点数，z-index和其他定位属性，你就会改变这种行为。

Stacked divs：

|---------|
|         |
|         |
|         |
|---------|
|---------|
|         |
|         |
|         |
|---------|

Answer 3

这是一个解决方案，但我仍会查看一些jquery插件，其中导航栏也会在滚动时调整大小

http://jsfiddle.net/awozkq5p/5/

添加了

.spacer{padding-top: 150px;}

位置或浮动 - 一个div在另一个下面（顶部div包含固定导航）

3 个答案: