求助：实现视觉固定且置于nav后方的header（滚动时随窗口移动）

要实现视觉固定且位于nav后方的header，你当前的问题在于未给header设置固定定位，且body的position:absolute会干扰正常滚动布局。以下是修正方案：

核心修改点 #

• 给<header>设置position:fixed实现固定，通过z-index控制层级让nav显示在上方
• 移除body的position:absolute，恢复页面默认文档流与滚动行为
• 调整header内部元素层级，确保nav始终在header背景内容上方

修改后的CSS代码 #

/* 移除body的绝对定位，恢复默认布局，可选移除默认边距避免偏移 */
body {
    margin: 0;
}

/* 固定header在视口顶部，设置宽度与基础层级 */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1; /* 确保header处于nav下方 */
    height: 80px; /* 根据实际需求设置header高度 */
}

/* 给nav设置更高层级，确保显示在最上方，可选添加背景色避免被下方图片遮挡 */
header nav {
    position: relative;
    z-index: 2;
    background-color: #ffffff;
    padding: 1rem;
}

/* 让header图片铺满容器，置于header最底层 */
.header--image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例并铺满容器 */
    z-index: 0;
}

/* 给main设置上边距，避免被固定的header遮挡 */
main {
    margin-top: 80px; /* 数值与header高度保持一致 */
}

关键说明 #

• position:fixed会让header脱离文档流，固定在视口顶部，不会随滚动移动
• 通过z-index层级控制：nav(z=2) > header(z=1) > 背景图(z=0)，确保nav始终显示在最上层
• object-fit:cover保证header图片在铺满容器的同时，不会出现拉伸变形
• 给main设置margin-top是为了避免页面主体内容被固定的header遮挡

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