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

Question

下面是 NAVBAR 的 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 组件，因为它以某种方式与其余内容一起流动。查看this link .