标题中的粘滞导航栏

-5 html css navigation menu header

嗨,我想让我的导航菜单保持在我的页面顶部.

帮助的搜索栏位于顶部,但我希望main是导航,而StackExchange的位置更多,但左边是我的徽标.

当我向下滚动时,nav menu-header堆叠在顶部,内容在它后面.

我没有代码,因为我很生气,我不知道从哪里开始我已经尝试在一个div中制作所有内容,但没有发生任何事情......之后我试图修复它们(我已经让它们成为一个在另一个)这种方式,但只有导航菜单固定和标题消失,但当我修复标题...这是不可能的向下滚动....如果有人可以给我HTML和CSS示例,我会真的很高兴....因为我有不知道我怎么能这样做

tax*_*ala 7

设置标题以使其具有如下css属性:

基本HTML:

<html>
    <head><title>Sticky header</title><head>
    <body>
        <div id="header>Your nav goes here</div>
        <div id="content">Content things go here.</div>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

CSS

#header {
    position: fixed;
    top: 0;
    z-index: 500;
    height: 45px;
}

#content {
    padding-top: 50px;
}
Run Code Online (Sandbox Code Playgroud)

有了这个,你将确保无论用户是否向下滚动,你的标题都将始终可见,并且z-index是为了确保标题始终位于其他内容之上,如果你有模态,则给出模态z-index:1000; 这样你就可以确保你的标题不会削减模态.

希望这可以帮助.