固定头部需设 position: fixed 并预留下方内容空间，推荐用 padding-top 或 CSS Grid；注意 z-index 层叠上下文影响及移动端 touch 滚动穿透问题。
固定头部需要避开文档流重叠
直接给 header 加 position: fixed 后，它会脱离文档流，导致后续内容从页面顶部开始渲染，被头部遮挡。必须手动为 body 或主内容容器预留出等于头部高度的上边距或内边距。
- 常见错误：只设
header { position: fixed; top: 0; left: 0; width: 100%; }，没处理下方内容偏移 - 推荐做法：用
padding-top给main元素留空，比用margin-top更稳定（避免 margin 折叠） - 如果头部高度不固定（比如响应式字号变化），优先用
padding-top: clamp(60px, 8vh, 100px)或 JS 动态同步高度
使用 CSS Grid 实现主体区域自适应高度
固定头部后，主内容区常需占满剩余视口高度（尤其是后台类页面）。用 height: 100vh 不可靠——它包含整个视口，而固定头部已占据一部分，会导致滚动条或空白。
- 更稳妥方案：用
display: grid配合grid-template-rows -
header设固定高度（如60px），main用1fr自动撑满剩余空间 - 注意：父容器（如
body）需设height: 100vh且margin: 0，否则 grid 行高计算失效
body {
margin: 0;
height: 100vh;
display: grid;
grid-template-rows: 60px 1fr;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #333;
z-index: 1000;
}
main {
/ 不再需要 position: relative 或 margin-top /
padding-top: 60px; / 仅用于视觉隔离，非布局依赖 /
}
z-index 和层叠上下文的实际影响
固定头部常要盖在其他元素之上，但 z-index 不是万能开关。如果父容器触发了层叠上下文（如设置了 opacity 、transform、will-change），子元素的 z-index 只在该上下文中生效，可能仍被外部元素遮挡。
- 检查
header父级是否意外设置了transform: translateZ(0)或filter - 固定头部建议直接挂载在
body下，避免嵌套过深引发层叠问题 - 调试时可用浏览器开发者工具的「Layers」面板查看实际绘制顺序
移动端 touch 滚动穿透问题
在 iOS Safari 或部分安卓 WebView 中，固定定位元素可能造成背景内容意外滚动（尤其弹窗叠加在固定头部下时）。这不是 CSS 问题，而是浏览器对 position: fixed 的实现差异。
立即学习“前端免费学习笔记（深入）”；
- 临时缓解：给
body添加touch-action: none（慎用，会禁用所有触摸操作） - 更优解：改用
position: sticky替代（支持现代浏览器），头部在滚动到顶部时才吸附，无穿透风险 - 若必须用
fixed，确保弹窗等覆盖层也用position: fixed并设置更高z-index，同时监听touchmove事件并preventDefault()
固定头部看着简单，真正落地时最常卡在三个地方：内容被遮挡（忘了留空）、视口高度计算错（100vh 误用）、以及移动端的滚动行为失控。这些都不是“写完就跑通”的环节，得一个个对着真机和 devtools 拉出来看。
