粘性导航栏允许其他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