在网页开发中，固定导航栏是提升用户浏览体验的常用组件，但不少开发者会遇到导航栏被后续内容遮挡的问题，这背后和CSS的z-index属性以及层叠上下文机制密切相关。
问题现象与常见误区
当我们给导航栏设置position:fixed后，滚动页面时可能会发现导航栏被下方的轮播图、内容区块等元素遮挡，很多开发者第一反应是给导航栏加一个很大的z-index值，比如z-index:9999，但有时候这样设置后依然没有效果，这就是对z-index的生效规则理解不到位导致的。
z-index的核心规则
z-index属性用于控制定位元素在Z轴（垂直于屏幕的方向）上的层叠顺序，数值越大，元素越靠上。但它有两个核心生效前提：
- 元素必须设置了
position属性，且值不为static（即relative、absolute、fixed、sticky其中一种） - 元素没有处于某些特殊的层叠上下文限制中
如果元素没有设置定位属性，即使设置了z-index也不会生效。我们可以通过下面的代码验证这个规则：
/* 没有定位的导航栏，z-index无效 */
.nav-no-position {
z-index: 9999;
/* 没有设置position，z-index不生效 */
}
/* 有定位的导航栏，z-index生效 */
.nav-with-position {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
层叠上下文的影响
层叠上下文是HTML元素在Z轴上的一个层级范围，每个层叠上下文就像是一个独立的容器，内部的z-index只在当前容器内生效，不会影响到外部的层叠顺序。常见的会创建层叠上下文的属性包括：
position为absolute或relative且z-index不为autoposition为fixed或stickyopacity值小于1transform值不为noneflex容器的子元素且z-index不为auto
如果导航栏的父元素创建了层叠上下文，那么导航栏的z-index上限就被限制在这个父元素的层叠范围内，即使设置再大的z-index，也无法超过父元素所在层叠上下文的上限。比如下面的结构：
<div class="parent" style="opacity:0.9;">
<div class="nav" style="position:fixed;z-index:9999;">导航栏</div>
</div>
<div class="content" style="position:relative;z-index:1;">内容区域</div>
这里父元素parent因为opacity小于1创建了层叠上下文，导航栏属于这个层叠上下文，而内容区域如果在更高的层叠上下文或者和父元素同层但z-index更高，就会覆盖导航栏。
具体解决步骤
第一步：检查导航栏的定位属性
首先确认导航栏是否设置了position:fixed，如果没有添加，先补充定位属性，这是z-index生效的基础。
第二步：检查父元素的层叠上下文
通过浏览器的开发者工具查看导航栏的所有父元素，看是否有元素设置了会创建层叠上下文的属性，如果有，要么移除这些属性，要么调整结构让导航栏脱离这个层叠上下文。
第三步：设置合理的z-index值
给导航栏设置一个较高的z-index值，不需要设置成9999这种极大值，只要比页面其他元素的z-index高即可，避免数值过大带来后续维护问题。
完整示例代码
下面是一个可正常运行的固定导航栏示例，不会被内容覆盖：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>固定导航栏示例</title>
<style>
/* 重置默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 固定导航栏样式 */
.fixed-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
z-index: 100; /* 设置合理的z-index值 */
display: flex;
align-items: center;
padding: 0 20px;
}
/* 内容区域样式 */
.content {
margin-top: 60px; /* 避免内容被导航栏遮挡 */
padding: 20px;
height: 2000px;
background-color: #f5f5f5;
}
.content-block {
height: 400px;
margin-bottom: 20px;
background-color: #fff;
padding: 20px;
}
</style>
</head>
<body>
<div class="fixed-nav">
<span>我的导航栏</span>
</div>
<div class="content">
<div class="content-block">内容区块1</div>
<div class="content-block">内容区块2</div>
<div class="content-block">内容区块3</div>
</div>
</body>
</html>
注意事项
不要滥用z-index，尽量通过合理的HTML结构和CSS布局来避免层叠冲突，过多的层叠上下文和过高的z-index值会增加样式维护的难度。如果页面中有多个需要层叠的元素，建议统一规划z-index的取值范围，比如导航栏用100-199，弹窗用200-299，提示框用300以上，这样后续调整会更清晰。