Fixed导航栏被Absolute层级Div覆盖，如何让导航栏置于最上层？

我制作了一个fixed定位的navbar，但滚动到页面底部时，有一个absolute定位的div会覆盖在它上方。我希望导航栏能始终置于网站所有内容的最上层，不清楚原因，能否帮忙解决？是否可以修复？

我的代码： #

HTML

<body>
    <header>
        <div class="navbar">
            <div class="navbar-gauche">
                <a href="easter-egg">Hidden</a>
            </div>
            <div class="navbar-centre">
                <a href="index.html">Accueil</a>
                <a href="competences.html">Compétences</a>
                <a href="projets.html">Projets</a>
            </div>
            <div class="navbar-droite">
                <a class="droite" href="contact.html"><img src="images/paper-plane-icon.svg" id="dessus"/>‎ Contact</a>
            </div>
        </div>
    </header>
    <main>
        <div class="accueil-1">
            <h1>Qui suis je?</h1>
        </div>
        <div class="accueil-2"><div><div><div>
            <div class="mosaique"></div>
        </div></div>
        </div>
    </main>
</body>

CSS

/*
Données générales
*/

:root{
    --primary-color: #ffffff;
    --second-color: #C4D7ED;
    --third-color: #ABC8E2;
    --fourth-color: #375D81;
    --fith-color: #183152;
  }

*{
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 
}

html{
    height: -webkit-fill-available;
} 

body{
    margin: 0%;
    height: 100%;
}
main{
    height: 100%;
}

/*
Barre de naviguation
*/

.navbar{
    position: fixed;
    top:0;
    background: var(--third-color);
    display: flex;
    width: 100%;
}
.navbar a{
    float: left;
    color: var(--primary-color);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 2vw;
}


.navbar-gauche a{
    color: var(--second-color);
    font-family: Courgette;
}

.navbar-centre{
    float: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.navbar-centre a:hover{
    background-color: var(--second-color);
    color: var(--fith-color);
}

.navbar-droite{
    background-color: var(--fith-color);
    color: var(--fourth-color);
    margin-left: auto; 
    margin-right: 0%;
}

.navbar-droite a:hover{
    color: var(--first-color);
}

.droite{
    display: flex;
}
.navbar-droite img{
    height: 2.5vw;
    width: 2.5vw;
}


#dessus{
    fill: green;
}


/*
Page principale
*/

.main{
    height: 100%;
    width: 100%;
}

.accueil-1 {
    background-image: url("images/accueil-1.webp");
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

h1{
    font-family: Courgette;
    color: var(--fourth-color);
    line-height: 700px;
    text-align: center;
    font-size: 6vw;
}

.accueil-2{
    background-color: var(--second-color);
    height: 100%;
    width: 100%;
}

.mosaique{
    background-color: var(--primary-color);
    height: 100%;
    width: 70%;
    position: absolute;
    right: 15%;
    left: 15%;
    margin-top: -20%;
}

原因分析 #

问题源于CSS的堆叠上下文规则：

• .navbar是fixed定位，但未设置z-index，默认堆叠层级为0
• .mosaique是absolute定位，默认堆叠层级同样为0，但它在HTML结构中位于.navbar之后，当z-index相同时，后面的元素会覆盖前面的元素，导致导航栏被遮挡。

解决方案 #

给.navbar添加z-index属性，设置一个足够大的值（比如9999），确保它的堆叠层级高于页面中所有其他元素：

.navbar{
    position: fixed;
    top:0;
    background: var(--third-color);
    display: flex;
    width: 100%;
    z-index: 9999; /* 新增这一行 */
}

额外优化建议 #

• 给main元素添加padding-top，避免页面顶部内容被fixed导航栏遮挡（例如padding-top: 60px;，具体数值可根据导航栏实际高度调整）
• 后续添加其他定位元素时，注意控制z-index值，避免再次出现层级冲突。

内容的提问来源于stack exchange，提问作者Kidoly