导航栏z-index设置失效：渐变遮挡菜单、下层内容穿透问题

z-index 仅在同一个层叠上下文内生效，只要元素触发了层叠上下文（比如设置position: fixed/absolute/relative、transform属性、opacity值小于1等），内部元素的z-index不会和上下文外的元素跨级比较。你之前的写法把渐变矩形和导航菜单、页面内容放在不同的层叠上下文里，单独给单个元素硬设z-index甚至加!important都没法得到想要的层级效果。

要实现导航菜单项 > 渐变矩形 > 页面其余所有内容的层级，不需要给每个元素挨个试z-index，按下面的结构调整即可：

• 给导航栏创建独立的高层级层叠上下文，确保整个导航模块都盖在页面普通内容上方
• 把渐变矩形放到导航栏容器内部，作为导航的背景层，不要和页面普通内容平级放置
• 同一上下文内按优先级给元素设z-index，不要滥用!important
• 渐变宽度不要写死1920px，用100%适配不同屏幕尺寸

修正后的完整代码如下：

<!-- 导航栏外层容器 -->
<nav class="site-nav">
  <!-- 渐变背景层 -->
  <div id="grad1"></div>
  <!-- 导航菜单区域，放Home、Artist等菜单项 -->
  <div class="nav-menu">
    <a href="/">Home</a>
    <a href="/artist">Artist</a>
    <!-- 其余菜单项自行补充 -->
  </div>
</nav>

/* 导航容器固定在顶部，创建高层级上下文盖过所有页面内容 */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  z-index: 999; /* 该值只要大于页面其他模块的z-index即可 */
}

/* 渐变层样式，层级低于菜单 */
#grad1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  border: 1px solid #000;
  z-index: 1;
  background-color: black;
  background-image: linear-gradient(0deg, transparent, #d9ff76 40%);
}
.dark-mode #grad1 {
  background-color: red;
  background-image: linear-gradient(0deg, #d9ff76 , black 40%);
}

/* 导航菜单层级最高，显示在渐变上方 */
.nav-menu {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  /* 其余菜单排版样式按需补充 */
}

• 渐变层和导航菜单分属不同层叠上下文，z-index对比规则不生效，才会出现要么渐变盖菜单、要么页面内容穿渐变的问题
• 滥用!important会打乱CSS优先级规则，后续调整样式时极易出现优先级冲突
• 宽度写死1920px会导致小屏幕显示不全、大屏幕铺不满的适配问题
• 把渐变层设为fixed和页面内容平级，很容易被其他同样设置了定位的页面元素覆盖

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