固定定位Header透明，滚动时内容覆盖Header的解决求助

嘿，这个问题我碰到过好多次啦，核心原因其实是固定定位（position: fixed）的元素默认堆叠层级（z-index）不够高，导致页面内容滚动上来时会盖在它上面。咱们直接两步就能搞定：

1. 给Header设置更高的z-index #

修改你的CSS代码，给#header加上z-index属性，只要值比内容区域的堆叠层级高就行（比如设为9999，这个数值足够避开绝大多数场景的层级冲突）：

* { margin: 0; padding: 0; }
#header { 
  background-color: #F9F6F3; 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100px; 
  z-index: 9999; /* 新增这一行，让Header始终处于最上层 */
}

2. 给内容区域添加上边距（可选但推荐） #

因为固定定位的Header会脱离文档流，页面默认的内容会跑到Header下方被遮挡。所以建议给内容容器加上和Header高度一致的上边距，让内容从Header下方开始显示：

/* 请根据你的实际内容容器选择器调整，比如.content或main */
.content {
  margin-top: 100px; /* 和Header的height值保持一致 */
}

这样修改后，Header就会一直稳稳显示在内容上方，滚动页面也不会被覆盖，同时内容也不会被Header挡住啦~

内容的提问来源于stack exchange，提问作者A. Max