position fixed导航栏被div边框竖线覆盖的原因及修复方案

嘿，这个问题我之前也碰到过！其实核心原因很简单——元素的堆叠层级（z-index）没设置对。

问题成因 #

当你给导航栏设置position: fixed后，它确实会脱离文档流悬浮在页面上方，但CSS里的元素堆叠是有优先级的：如果页面上的其他元素（包括它的边框、伪元素这类）拥有更高的z-index值，或者导航栏本身没设置z-index，就会出现被覆盖的情况。你页面里的div竖线能跑到导航栏上面，说明它的堆叠层级比导航栏更高。

修复方法 #

给你的导航栏添加一个足够高的z-index值就行，比如：

.navbar {
  position: fixed;
  /* 保留你已有的其他样式 */
  z-index: 999; /* 这个值只要比竖线元素的z-index高就可以 */
}

为什么这么做？因为z-index属性专门控制元素在堆叠上下文里的顺序，数值越高，元素越靠上。给fixed定位的导航栏设置一个较高的z-index，就能确保它始终处于页面最上层，不会被其他元素覆盖。

如果设置后还是有问题，可以检查一下那个带竖线的div有没有设置position（比如relative/absolute）+ 更高的z-index，或者有没有使用transform、opacity这类会创建新堆叠上下文的属性，调整对应的层级就行。

内容的提问来源于stack exchange，提问作者Márton Gergő