CSS问题：滚动内容覆盖fixed div时背景消失

嘿，这个坑我之前踩过！你的问题核心在于堆叠上下文的规则：默认情况下，.content-wrapper是position: static（CSS默认值），这种定位状态下设置z-index完全不起作用——所以只有容器里的文字能正常覆盖fixed的#map，但背景却跑到了下面。

可行的CSS修改方案 #

只需要调整两个地方，就能让容器的背景和内容一起覆盖fixed元素：

1. 给.content-wrapper添加非static的定位（比如position: relative），让它的z-index属性生效；
2. 给#map明确设置一个更低的z-index值，确保层级关系清晰。

修改后的完整CSS代码：

#map { 
  position: fixed; 
  background: red; 
  left: 0; 
  right: 0; 
  top: 0; 
  height: 100px; 
  z-index: 1; /* 设置比content-wrapper更低的层级 */
}
.text { 
  position: relative; 
  left: 0; 
  right: 0; 
  padding: 10px; 
  top: 100px; 
}
.content-wrapper { 
  background: yellow; 
  z-index: 3; 
  display: block; 
  position: relative; /* 关键：开启堆叠上下文，让z-index生效 */
}

原理说明 #

当元素设置了relative/absolute/fixed/sticky这类非static定位时，会创建独立的堆叠上下文，此时z-index才能真正控制它在堆叠顺序中的位置。现在.content-wrapper的层级比#map高，它的背景和内部内容就都会完整覆盖在fixed元素上方，滚动时就能达到你想要的效果啦。

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