如何让navbar置于前景、divs置于背景？滚动层级问题求助

核心修复逻辑 #

网页元素的堆叠层级由position属性与z-index值共同控制：仅当元素设置非static定位（如fixed/sticky/absolute）时，z-index才会生效，数值越大的元素越优先显示在上层。

具体实现步骤 #

1. 给导航栏设置固定/粘滞定位
   让导航栏脱离文档流，始终保持在视口顶部：

   .navbar {
     position: fixed; /* 或使用 position: sticky; top: 0; 实现滚动到顶部后固定 */
     top: 0;
     left: 0;
     width: 100%;
     /* 补充基础样式，比如背景色避免内容穿透 */
     background-color: #ffffff;
     height: 60px;
   }
   

2. 设置更高的z-index值
   确保导航栏的层级高于下方div：

   .navbar {
     /* 已有样式 */
     z-index: 9999; /* 数值只需大于下方元素的z-index即可，设较大值避免后续样式冲突 */
   }
   

3. 调整下方内容的顶部间距（可选）
   若使用fixed定位，导航栏会脱离文档流，下方内容会被导航栏覆盖，需给下方div设置与导航栏高度一致的margin-top：

   .content-div {
     margin-top: 60px; /* 数值与导航栏height保持一致 */
   }
   

额外注意点 #

• 检查下方div的z-index，若其设置了高于导航栏的数值，需将其调小（或保留默认的auto，即层级为0）。
• 若使用sticky定位，需确保导航栏的父元素未设置overflow: hidden，否则sticky属性会失效。

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