我创建了一个漂亮的导航栏,即使用户正在滚动,我也想保持在页面顶部。我为名为 header.php 的 header 创建了一个单独的 PHP 文件,并将其包含在主页中。
标题菜单的 CSS
.headerMenu {
background-image: url(../img/background_white.png);
height: 56px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
width: 100%;
}
虽然效果很好,但是当用户滚动时它不会停留在顶部,所以我决定添加一些额外的代码:
.headerMenu {
background-image: url(../img/background_white.png);
height: 56px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
width: 100%;
position: fixed;
top: 0;
}
输入这两个代码后,我的导航栏将不会显示在页面上。
我试着在网上问了一些人,他们都提出了 position:fixed; top:0;
代码。为什么它不起作用?
HTML
<div class = "headerMenu">
<div id = "menu">
<a href = "home.php" />What's New</a>
<a href = "home.php" /><?php echo $firstname; ?></a>
<a href = "signout_com.php" />Sign Out</a>
</div>
</div>
最佳答案
试试这个:)
.headerMenu {
position:fixed;
top:0;
width:100%;
background-color:#FF0000;
background-image:url(../img/background_white.png);
height:56px;
}
移除填充,然后移除 anchor 的自闭合标签 :)
还要确保将内容放在它下面 :) 然后在内容元素的顶部添加 56 像素的边距。
希望对你有帮助
关于html - 导航栏保持在顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23740579/