粘性导航栏允许其他 div 元素重叠

Question

下面我有一个导航栏的HTML和SCSS(SASS(

<div id="navbar">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#main">Main</a></li>
<li><a href="#bedroom">Bedroom</a></li>
<li><a href="#living-room">Living Room</a></li>
<li><a href="#bathroom">Bathroom</a></li>
<li><a href="#kitchen">Kitchen</a></li>
<li><a href="#others">Others</a></li>
</ul>
</div>

#navbar{
position: fixed;
top: 0;
height: 4rem;
width: 100%;
background-color: $dark-color1;
ul{
display: flex;
justify-content: center;
justify-content: space-between;
padding: 0 3rem;
background:$dark-color2;
text-align: center;
align-items: center;
}
li{
display: flex;
font-size: 1.3rem;     
}
a{
color: $light-color1;
text-decoration: none;
list-style: none;
padding: 20px;
}
a:hover{
background-color: $light-color2;
color: $dark-color2;
}
}

当我在它下面添加其他div 元素时，例如如下所示的卧室div{

<div id="bedroom" class = "room">
<p class = "title"> Bedroom</p>
<div class="flooring-tile">
<label for="Flooring-tile">Flooring Tile</label>
<input type="checkbox">
</div>
<div class="flooring-carpet">
<p class = "pname">Flooring Carpet</p>
<label for="Replacement">Replacement</label>
<input type="checkbox">
<label for="Powerclean">Powerclean</label>
<input type="checkbox">
}

下面的 Div 往往与导航栏重叠。我的目标是创建一个没有滚动(溢出：隐藏(的页面，用户应该只通过滚动条导航。

但是由于 #bedroom 的内容隐藏在导航栏后面，因此我无法正确排列页面。

Answer 1

>我认为position: absolute;可以帮助分离导航栏组件的内容。Absolute适合您使用的div 组件，因为它以某种方式与其余内容一起流动。查看此链接。