EJS导入的header受.page元素margin-top影响，求CSS问题排查

问题原因 #

1. 你给header设置了position: fixed但没有显式指定top属性，这种情况下fixed定位元素的垂直位置会沿用它处于普通文档流时本该对应的位置。
2. .page是<body>的直接子元素，受CSS外边距折叠规则影响，.page设置的20vh margin-top会溢出到<body>上，相当于<body>整体被增加了20vh的上边距，导致没有固定top值的header也跟着整体下移，看起来像是被.page的margin影响。

解决方案（任选其一即可） #

方案1（更推荐，符合fixed定位的使用规范）

给header的CSS规则新增top: 0，强制固定在视口顶部，完全和文档流位置解绑：

header {
    position: fixed;
    top: 0; /* 新增这行 */
    height: 60px;
    width: 100%;
    z-index: 3;
    background-color: rgb(32, 34, 37);
}

方案2

给<body>设置样式触发BFC，避免子元素的margin溢出折叠：

body {
    margin: 0; /* 建议先清除浏览器默认的body边距 */
    padding-top: 1px; /* 或设置 border-top: 1px solid transparent 效果相同 */
}

补充建议 #

所有使用position: fixed或者position: absolute定位的元素，都建议显式设置top/right/bottom/left定位值，避免依赖浏览器默认的隐式位置计算出现预期外的渲染结果。

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