设置header为position:fixed后收缩右移、文本排版错乱如何解决？

给元素设置position: fixed;后，元素会脱离普通文档流，不再占据原有文档位置，同时默认宽度会收缩为适配内容的宽度，若没有显式指定定位偏移值，元素的水平起始位置会沿用其在普通流中的原始位置，就会出现header收缩、向右侧偏移的问题；宽度收缩后内部可用空间不足，原本排在同一行的text text text格式文本自然会被挤到下一行，引发布局错乱。

• 给fixed定位的header显式设置宽度：添加width: 100%;让header和视口同宽，如果header设置了内边距padding或边框border，同步添加box-sizing: border-box;，避免宽度溢出视口。
• 显式指定定位偏移值：添加left: 0;、top: 0;，将header固定在视口左上角，彻底解决偏移问题。

可直接参考的基础样式代码：

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  /* 原有自定义样式（背景、高度、内边距、排版样式等）保留即可 */
}

补充说明：header设为fixed定位后会脱离文档流，会遮挡下方正常流的内容，记得给header紧邻的下一个元素设置和header高度相等的margin-top或padding-top，避免内容顶部被遮挡。宽度恢复为100%后，内部文本的换行错乱问题会自动修复，不需要额外调整文本排版属性。

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