Html 非固定导航栏上方的固定标题

所以我有这个标记：

<header>
    <h1> Movy </h1>
    <span class="tools" style='display: none'>
        <button id='edit'>
            <i class="fa fa-pencil"></i>
        </button>
        <button id='check'>
            <i class="fa fa-check"></i>
        </button>
        <button id='trash'>
            <i class="fa fa-trash-o"></i>
        </button>
    </span>
</header>

<nav id='nav'>
    <ul class='navbar-nav'>
        <li id='came-out'>Came Out</li>
        <li class='active' id='coming-soon'>Coming Soon</li>
        <li id='watched'>Watched</li> 
    </ul>
</nav>
...

但这不是我想要的。我尝试向每个元素添加

clear:all

，但没有任何更改。

---

编辑：是它的外观，但是页眉应该是固定的。

为您的导航和页面的其余部分添加一个包装div，并设置页边空白顶部以清除页眉div

<header>
    <h1> Movy </h1>
    <span class="tools" style='display: none'>
    <button id='edit'>
        <i class="fa fa-pencil"></i>
    </button>
    <button id='check'>
        <i class="fa fa-check"></i>
    </button>
    <button id='trash'>
        <i class="fa fa-trash-o"></i>
    </button>
    </span>
</header>

<div id='wrapper'>
<nav id='nav'>
    <ul class='navbar-nav'>
        <li id='came-out'>Came Out</li>
        <li class='active' id='coming-soon'>Coming Soon</li>
        <li id='watched'>Watched</li> 
    </ul>
</nav>
</div>

---

为nav和页面的其余部分添加一个包装div，并设置一个页眉div以清除页眉div

<header>
    <h1> Movy </h1>
    <span class="tools" style='display: none'>
    <button id='edit'>
        <i class="fa fa-pencil"></i>
    </button>
    <button id='check'>
        <i class="fa fa-check"></i>
    </button>
    <button id='trash'>
        <i class="fa fa-trash-o"></i>
    </button>
    </span>
</header>

<div id='wrapper'>
<nav id='nav'>
    <ul class='navbar-nav'>
        <li id='came-out'>Came Out</li>
        <li class='active' id='coming-soon'>Coming Soon</li>
        <li id='watched'>Watched</li> 
    </ul>
</nav>
</div>

---

您需要将收割台的高度设置为固定高度（em或px）。然后在你的身体上加上一个相同号码的垫子

body {
    background: #e5e5e5;;
    font-family: 'Roboto Condensed', 'Calibri', 'Arial', sans-serif;
    margin: 0; padding: 0;
    color: #444;
    height: 2000px;
    padding-top: 50px;
}

header {
    background: #4285f4;
    color: white;
    padding: 12px;
    padding-left: 15px;
    position: fixed;
    width: 100%;
    z-index: 1000;
    height: 26px;
    margin: 0;
    top: 0;
}

去掉导航的边缘

---

选中此项。

您需要将收割台的高度设置为固定高度（em或px）。然后在你的身体上加上一个相同号码的垫子

body {
    background: #e5e5e5;;
    font-family: 'Roboto Condensed', 'Calibri', 'Arial', sans-serif;
    margin: 0; padding: 0;
    color: #444;
    height: 2000px;
    padding-top: 50px;
}

header {
    background: #4285f4;
    color: white;
    padding: 12px;
    padding-left: 15px;
    position: fixed;
    width: 100%;
    z-index: 1000;
    height: 26px;
    margin: 0;
    top: 0;
}

去掉导航的边缘

---

检查此项。

您所说的“导航栏保持原样”是什么意思？它应该是固定的，还是滚动的？也许你可以添加一个图像，指出所需的结果。我不明白你要求的是什么…@LinkinTED你是对的，对不起，我已经更新了问题。导航按钮应该随页面滚动，还是也可以修复？它们应该随页面滚动，正如我在编辑中提到的，你所说的“和导航栏保持原样”是什么意思？它应该是固定的，还是滚动的？也许你可以添加一个图像，指出所需的结果。我不明白你要求的是什么…@LinkinTED你是对的，对不起，我已经更新了这个问题。导航按钮应该随页面滚动，还是也被修复？它们应该随页面滚动，正如我在编辑中提到的。结果是一样的：。但是谢谢你的快速回答您希望（但不需要）将包装显示为块，然后将top:0添加到页眉部分，并增加包装的页边距top，直到它位于您想要的位置。为什么将一个块元素包装在另一个块元素中？对我来说没有意义。。。您可以轻松地将导航样式设置为与包装相同的样式。。。不需要额外的元素。为头下面的所有其他元素添加一个包装器是有意义的。我就是这样工作的。通常情况下，您会将页面放在一个包装器中，如果其中一部分被取出并修复，我发现将页面的其余部分包装在一个块中非常有用。结果是相同的：。但是谢谢你的快速回答您希望（但不需要）将包装显示为块，然后将top:0添加到页眉部分，并增加包装的页边距top，直到它位于您想要的位置。为什么将一个块元素包装在另一个块元素中？对我来说没有意义。。。您可以轻松地将导航样式设置为与包装相同的样式。。。不需要额外的元素。为头下面的所有其他元素添加一个包装器是有意义的。我就是这样工作的。一般来说，不管怎样，你都会将页面放在一个包装器中，如果它的一部分被取出并修复，我发现将页面的其余部分包装起来，将其保存在一个块中是很有用的。