固定顶部用 position: fixed 需配合 top: 0、z-index 和 body 的 padding-top；锚点跳转错位用 scroll-margin-top 修复；移动端卡顿可加 transform: translateZ(0) 或改用 position: sticky。
header 固定顶部的 CSS 样式怎么写
直接用 position: fixed 是最常用也最可靠的方式，但必须配合 top: 0 和足够高的 z-index，否则会被其他元素遮挡或错位。
关键点在于：固定后元素脱离文档流，后续内容会“上移”，必须手动给 body 或主容器加 padding-top（值 ≥ header 高度），否则内容会被 header 盖住。
示例：
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #fff;
z-index: 1000;
}
body {
padding-top: 60px; / 必须匹配 header 高度 /
}
为什么 fixed 后导航点击跳转时页面闪动或错位
常见于使用锚点跳转（如 ）时，浏览器滚动到目标位置，但 fixed header 挡住了目标元素顶部——因为锚点定位是按文档原始位置计算的，没考虑 fixed 元素占位。
立即学习“前端免费学习笔记（深入）”；
解决方法不是改 JS 滚动逻辑，而是用 CSS 的 scroll-margin-top：
- 给目标区块（如
）加scroll-margin-top: 60px - 这个值应等于 header 高度，现代浏览器（Chrome 92+、Firefox 91+、Safari 15.4+）都支持
- 不支持的旧浏览器需回退 JS 方案，但绝大多数场景已无需兼容
移动端 fixed header 滚动卡顿或消失怎么办
iOS Safari 和部分安卓 WebView 对 position: fixed 渲染有优化限制，尤其在快速滚动时可能触发“重绘抑制”，导致 header 卡顿、闪烁甚至暂时不可见。
缓解手段有限但有效：
- 给
header强制开启硬件加速：transform: translateZ(0)或will-change: transform - 避免在
header内使用box-shadow、渐变背景或大量子元素，精简 DOM 结构 - 不要同时对
header和body做overflow: hidden类操作，容易触发渲染异常 - 若仍不稳定，可改用
position: sticky+top: 0，它在多数移动端表现更稳（注意兼容性：IE 不支持，但 iOS Safari 9+、Android Chrome 56+ 均可用）
sticky 和 fixed 在 HTML5 布局里怎么选
position: sticky 看似像 fixed，实则是“条件性 relative”：只在滚动到阈值时才粘住，离开视口就恢复文档流。它天然不遮挡锚点内容，也不需要额外 padding-top，语义和行为更贴近“布局需求”。
适用场景判断：
- 要 header 始终可见且不干扰页面结构 → 优先用
sticky - 需要 header 脱离文档流、与其他层（如弹窗、广告）精确叠层 → 用
fixed - 项目需兼容 IE11 → 只能用
fixed，并手动处理锚点偏移 -
sticky的父容器不能有overflow: hidden|auto，否则失效——这点极易被忽略
真正难的不是写哪行代码，而是判断该用 sticky 还是 fixed；很多 bug 其实源于一开始选错了定位策略。
