-5 html css navigation menu header
嗨,我想让我的导航菜单保持在我的页面顶部.
帮助的搜索栏位于顶部,但我希望main是导航,而StackExchange的位置更多,但左边是我的徽标.
当我向下滚动时,nav menu-header堆叠在顶部,内容在它后面.
我没有代码,因为我很生气,我不知道从哪里开始我已经尝试在一个div中制作所有内容,但没有发生任何事情......之后我试图修复它们(我已经让它们成为一个在另一个)这种方式,但只有导航菜单固定和标题消失,但当我修复标题...这是不可能的向下滚动....如果有人可以给我HTML和CSS示例,我会真的很高兴....因为我有不知道我怎么能这样做
设置标题以使其具有如下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; 这样你就可以确保你的标题不会削减模态.
希望这可以帮助.