css - 如何将我的导航栏固定到页面顶部

<分区>

关于您编写的代码问题的问题必须在问题本身中描述具体问题 — 并且包括有效代码 以重现它。参见 SSCCE.org寻求指导。

关闭 9 年前。

我想知道是否有人可以帮助我修复我网页的顶部以保留。

我尝试过使用 position:fixed 属性，但这会阻碍一切，因为我的内容会与固定的 div 重叠。

我的网站在这里:

我希望导航栏上方的所有内容，包括导航栏在内的所有内容都粘在页面顶部，内容在其下方滚动。

我意识到这可能意味着我必须将大部分图像更改为 jpg 而不是 png。但是，我想知道这周围是否有任何东西？就像创建一个内容滚动的假线，然后消失，而不是到达页面顶部，您将通过 PNG 图像的透明部分看到它。我不想使用 iframe，真的，除非这是唯一的方法。

谢谢!

最佳答案

iframe 在这里肯定不是正确的选择。在你想要放在顶部的东西周围放置一个 div，在其上放置 position: fixed 并将其定位到左上角。

<div class="ontop">
    <div id="top"></div>
    <div id="logo"></div>
    <div id="contact"></div>
    <div id="navbar"></div>
</div>

之后，在#content-holder 上添加一些margin-top，等于.ontop 的高度。这是必要的，因为它被从文档流中取出(因为 position: fixed)并且内容将在它下面。

如果您还将 background-color: white 添加到 .ontop，您的透明度问题就会消失。

试图复制您的设置，这里是 working demo .

关于css - 如何将我的导航栏固定到页面顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17422830/

相关文章：

css - 带有 Haml 的表格内的下拉菜单