打印时fixed元素出现在每页顶部是规范行为，非bug；因打印无视口概念，浏览器忽略其定位逻辑，仅Firefox等会fallback渲染于每页左上角；必须重置position、top/right/bottom/left/z-index/transform/will-change等属性；实现每页页脚应改用<thead>与<tfoot>配合display: table-header-group/footer-group。
为什么打印时 fixed 元素会出现在每页顶部
这不是 bug，是浏览器按 CSS 打印规范主动行为：position: fixed 在打印布局阶段被完全忽略定位逻辑，但部分浏览器（如 Firefox）仍会尝试渲染它，且统一锚定在每页左上角——因为打印没有“视口滚动”概念，top: 20px 失去参照系，浏览器只能 fallback 到分页区域原点。
@media print 中重置 fixed 必须清空哪些属性
只写 position: static 是危险的。残留的定位相关属性会在计算样式中继续生效，引发错位或层叠异常：
-
top、right、bottom、left必须显式设为auto或0 -
z-index必须设为auto（否则可能干扰文档流内堆叠） -
transform和will-change建议一并重置，防缩放/位移残留或渲染优化干扰 - 第三方组件（如
.ant-affix）内部的 fixed 子节点常被漏掉，需用更具体选择器覆盖，例如@media print .ant-affix > * { position: static !important; }
想实现每页页脚，为什么不能用 fixed + bottom: 0
因为 position: fixed 元素脱离文档流，浏览器无法将其锚定到「每一页的物理底部」，反而会误判内容高度，强制插入空白页——尤其当内容未填满 A4 时，渲染引擎为预留“页脚空间”而多生成一页。
✅ 正确做法是放弃 fixed，改用原生表格机制：
立即学习“前端免费学习笔记（深入）”；
- 页眉内容放入
<thead>，加display: table-header-group - 页脚内容严格嵌套在
<tfoot>内，加display: table-footer-group - 彻底移除所有
position: fixed、bottom: 0、独立<div id="footer">结构
测试时最容易忽略的三个实际问题
很多问题只在导出 PDF 时暴露，Chrome 打印预览和最终 PDF 渲染仍有差异：
- 勾选「背景图形」——否则
background-color全部消失 - 检查不是“有没有”，而是“位置对不对”“跨页是否断裂”“边框颜色是否变灰”
-
break-inside: avoid对position: absolute或fixed元素完全无效，规范禁止应用分页控制，别白费力气
真正麻烦的不是写错样式，而是把 fixed 当成通用解法去套打印场景——它从底层就不适配分页模型。动手前先确认：这个元素是真需要「每页重复」，还是只需要「首页显示」？前者必须用 <thead>/<tfoot>，后者用 @page :first 更稳妥。
