相对定位内容覆盖fixed导航栏，仅修改导航栏CSS如何解决？

嘿，这个问题我之前也踩过坑，核心原因是CSS堆叠上下文在搞鬼！

问题根源 #

当你给页面内容设置position: relative（只要z-index不是默认的auto）或者任何transform属性（哪怕是translate(0,0)这种看似没效果的），这些元素会自动创建一个独立的堆叠上下文。这时候，哪怕你的导航栏是fixed定位且设了很高的z-index，它也只能在「根堆叠上下文」里生效——而那些带独立堆叠上下文的内容元素，它们的层级是和根上下文里的元素平级对比的，自然会跑到导航栏上面。

只改导航栏的解决方案 #

你完全不用修改所有页面内容，只需要给导航栏的CSS加两个关键属性（选一个也能生效，两个一起更保险）：

方案1：用3D变换提升堆叠优先级

给导航栏添加transform: translateZ(0)，它会让导航栏创建一个优先级更高的3D堆叠上下文，再配合足够大的z-index，就能稳稳压在所有内容上面：

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #333;
  color: #fff;
  /* 新增的核心属性 */
  z-index: 9999;
  transform: translateZ(0);
}

方案2：用will-change提前声明优化

如果你担心transform可能带来的细微布局影响，可以换成will-change: transform，它同样能让浏览器为导航栏创建高优先级的堆叠上下文，且不会有实际的变换效果：

.navbar {
  position: fixed;
  /* 其他原有样式 */
  z-index: 9999;
  will-change: transform;
}

为什么这招管用？ #

普通的relative或2Dtransform创建的堆叠上下文，优先级低于3D变换或will-change声明的堆叠上下文。通过给导航栏赋予更高优先级的堆叠上下文，再配合高z-index，就能确保它始终处于页面最上层，完全不用动任何内容的代码。

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