如何让position:fixed固定头部始终显示在页面最顶层

问题根因 #

CSS 层叠上下文规则中，所有 position 属性不为 static 的元素（包括 fixed、relative、absolute、sticky），如果没有显式设置 z-index，默认层级值等价于0，最终显示顺序由元素在DOM中的书写顺序决定：位置靠后的元素会覆盖位置靠前的元素。
你的头部虽然设置了 position: fixed，但未配置 z-index，页面中后续加载的带 position: relative 的元素会因为DOM顺序更靠后，直接渲染在头部上方造成遮挡，效果如下：

修复方案 #

不需要移除其他元素的 position: relative 属性，只需要给固定头部设置一个高于页面内其他所有元素的 z-index 值即可，这也是固定导航类组件的标准实现方式。
直接修改原有 header 样式，新增 z-index 配置：

header {
    background-color: aliceblue;
    padding: 5px 0px;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    /* 新增层级配置，999为通用的导航层级值，可根据项目实际调整 */
    z-index: 999;
}

注意事项 #

• 不建议设置过大的z-index值（如99999），预留足够数值空间给后续弹窗、全局提示等需要更高层级的组件，常规页面导航使用99或999即可满足需求
• 如果添加z-index后仍存在遮挡问题，检查header的父级元素是否存在transform、filter、perspective等会创建独立层叠上下文的属性：这类属性会导致子元素的z-index仅在父元素范围内生效，此时要么调整父元素层级，要么将header节点移动到body下的第一层节点位置即可。

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