fixed页头错位因width:100%按视口计算且受滚动条影响，应改用left:0;right:0;拉伸；内容区需margin-top或body padding-top避让；对齐居中内容时用width:100%;max-width:1200px;margin:0 auto。
为什么 position: fixed; top: 0; 的页头会错位或宽度异常
直接写 position: fixed; top: 0; width: 100%; 很容易出问题，不是宽度撑不满，就是被右侧滚动条挤偏，或者遮住内容后页面顶部留白。根本原因是 fixed 元素脱离文档流，其宽度计算默认基于视口（viewport），但若父容器有 padding、margin 或页面存在垂直滚动条，width: 100% 就不等于你期望的“和内容区一样宽”。
必须加 left: 0; right: 0; 而不是只靠 width: 100%
width: 100% 在 fixed 下按视口宽度算，但视口宽度 ≠ 页面内容宽度（尤其有滚动条时）。更可靠的方式是用定位拉伸：
header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
background: #fff;
z-index: 1000;
}
-
left: 0; right: 0;强制元素从视口左边缘铺到右边缘，不受滚动条影响 - 不需要写
width: 100%，它会被left/right覆盖 - 如果页头需要和内容区同宽（比如内容区居中且 max-width: 1200px），那就不能用
left/right: 0，得另配方案
内容区要避让固定页头，否则文字被遮挡
固定定位的页头不占文档流空间，后面的内容会从页面顶部开始渲染，直接顶到页头下面——结果就是第一屏内容被盖住。必须手动给主体内容留出空间：
- 最常用：给
或第一个内容区块加margin-top，值 = 页头高度（如margin-top: 60px;） - 更健壮：用
padding-top作用于，并配合box-sizing: border-box，避免 margin 塌陷干扰 - 注意：如果页头高度响应式变化（比如小屏变矮），纯 CSS 难以动态匹配，这时需 JS 监听或改用
position: sticky;替代
移动端和滚动条导致的宽度偏差怎么修
在 iOS Safari 或某些安卓浏览器里，地址栏收起/展开会触发视口高度变化，有时连带影响 fixed 元素的宽度判定；另外，当页面内容超长出现右侧滚动条时，width: 100% 会按“含滚动条宽度”的视口算，而 left: 0; right: 0; 仍能贴满（因为 right 是相对于视口右边缘）。
立即学习“前端免费学习笔记（深入）”；
- 保险做法：始终用
left: 0; right: 0;，别依赖width: 100% - 若设计要求页头严格对齐内容区（如内容区
max-width: 1200px; margin: 0 auto;），页头也需同样居中，此时应设width: 100%; max-width: 1200px; margin: 0 auto;，并确保父容器无 padding 干扰 - 避免在 fixed 页头上设
transform或filter，可能触发合成层异常，导致 iOS 上闪烁或错位
top: 0; left: 0; right: 0; 就只是起点，不是终点。 
