提问人：Muffin 提问时间：11/17/2023 最后编辑：Muffin 更新时间：11/19/2023 访问量：27
如何有一个固定的导航栏，内容在它下面
How to have a fixed navbar and the content is below it
问：
我有一个固定的导航栏：
.navbar
{
display: inline-block;
background-color: #2327fc;
list-style-type: none;
margin: 0px;
padding: 0px;
z-index:1;
width: 100%;
position:fixed;
}
.navObject
{
display: block;
padding:1vh;
}
.navLink
{
display:block;
background-color: #79aada;
padding:0.55vh;
border-style: solid;
border-color: #7c9ff9;
color:#ffffff;
font-weight: bold;
text-align:center;
text-decoration: none;
font-size: 3vh 3vw;
}
我希望div位于导航栏下方。有没有办法在不猜测所需保证金的情况下做到这一点。
<!DOCTYPE html>
<html>
<body>
<article>
<div>
<ul class ='navbar'>
<li class = 'navObject'><a href="(a link)" class="navLink" >Link 1</a></li>
<li class = 'navObject'><a href="(a link)" class="navLink" >Link 2</a></li>
<li class = 'navObject'><a href="(a link)" class="navLink" >Link 3</a></li>
.... more navbar content
</ul>
</div>
<div>
...below content
</div>
..closing tags
目前，下面 div 中的内容是从 html 页面的顶部显示的，导航栏涵盖了其中的一些内容。
我希望内容位于导航栏下方。（但也已修复 - 我知道将其固定会使其脱离流程，但有解决方法吗？
谢谢
答：
1赞
atomic_variable
11/17/2023
#1
使用而不是固定。position: sticky; top: 0;
评论
0赞
Muffin
11/19/2023
此解决方案不起作用。当我滚动时，导航栏消失了
0赞
Muffin
11/19/2023
我试图为我的问题添加更多上下文（html 代码）
0赞
atomic_variable
11/19/2023
看看这个 - codepen.io/saranya-mohan/pen/bGzLgzL?editors=1100
0赞
atomic_variable
11/19/2023
2 件事： 1. 是与 2.class='navbar'' 应该与要靠近它的 UI 元素平行。我已经让它在上面的代码笔中工作。如果您有任何疑问，请告诉我。topposition: sticky
0赞
Muffin
11/20/2023
谢谢它奏效了。我必须将类添加到 div 中，而不仅仅是 ul。
评论