17370845950

固定头部需设 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 拉出来看。