header被内容覆盖的根本原因是层叠上下文混乱或未定位，需先确认其父容器是否触发新层叠上下文（如transform、overflow:hidden），再为header设置position:relative/sticky/fixed并配z-index≥1000，避免内容区域滥用高z-index，必要时用position:fixed或isolation:isolate兜底。
header被内容覆盖，通常是因为它在层叠上下文中的层级（z-index）不够高，或者父容器设置了overflow: hidden、transform等触发新层叠上下文的属性，导致z-index失效。单纯加z-index不一定管用，得先理清层叠逻辑。
确认header是否处于正确的层叠上下文
如果header的父元素（比如body或某个wrapper）有position: relative/absolute/fixed且设置了z-index，而内容区域也在同一上下文中但z-index更高，header就会被盖住。更常见的是：父容器用了transform、opacity 、will-change等属性，悄悄创建了新的层叠上下文，把header“框死”在里面。
- 检查header及其直接父元素的CSS，看是否有隐式层叠上下文（如
transform: translateZ(0)） - 给header自身设置
position: relative（或sticky/fixed），再配z-index: 100以上 - 确保header的父容器没有不必要的
z-index限制（比如设成z-index: 1，反而压低了子元素上限）
用position + z-index组合生效
z-index只对定位元素（position值为relative、absolute、fixed或sticky）有效。如果header是默认的static，加z-index完全没反应。
- 给header加
position: relative（不影响布局）+z-index: 1000 - 若header需吸顶，改用
position: sticky; top: 0;，它天然具有较高层叠优先级，再加z-index更稳妥 - 避免给内容区域（如main、article）设过高的
z-index，比如z-index: 9999——没必要，还容易反超
排查overflow和flex/grid容器的影响
某些布局容器（尤其是overflow: hidden的flex或grid父容器）会裁剪超出部分，看起来像“被覆盖”，其实是被剪掉了。另外，flex容器中子项默认z-index不生效，除非显式设position。
立即学习“前端免费学习笔记（深入）”；
- 临时给父容器加
outline: 1px solid red，看header是否被裁切（边界内无header → overflow问题） - 若父容器是flex，给header加
align-self: flex-start并确保position已设置 - 慎用
overflow: hidden包裹整个页面布局；如必须，把header移出该容器，或用clip-path: none重置
简单可靠的兜底方案
如果调试耗时，可采用更鲁棒的写法，绕过复杂层叠计算：
- 将header设为
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;（适合全局顶部栏） - 用
isolation: isolate在header外层单独开启层叠上下文，避免受外界干扰 - 在CSS开头加全局重置：
header { position: relative; z-index: 1000 !important; }（仅调试用，上线前删掉!important）
基本上就这些。核心不是盲目堆z-index，而是看清谁在哪个层叠上下文里，让header真正“浮出来”。
