position: fixed 在打印时不渲染是 css paged media 规范要求，因打印无视口导致锚定失效；需重置 position、top/right/bottom/left、z-index、transform、will-change 等属性，并用 @page 或文档流结构实现页眉页脚。
为什么 position: fixed 在打印时完全不渲染
这不是 bug，是 CSS Paged Media 规范的硬性要求：打印没有“视口”，position: fixed 失去锚定基准，浏览器（Chrome、Firefox、Safari）在布局阶段直接跳过该元素的定位计算——连 top 值都不解析，加 !important 也无效。
必须重置哪些属性才能让内容回归文档流
只写 position: static !important 是危险的。残留的偏移和层叠属性仍参与样式计算，可能引发错位或塌陷：
-
top、right、bottom、left必须显式设为auto或0 -
z-index必须设为auto，否则在 flex/grid 父容器中可能干扰层叠顺序 -
transform和will-change也要重置为none和auto，防止渲染优化残留 - 第三方组件（如
.ant-affix、.el-dialog__header）的子节点常自带position: fixed，需单独覆盖，不能只写父选择器
如何实现每页都有的页眉页脚
别用 @media print { .header { position: fixed; } } —— 这种写法在 PDF 导出（如 wkhtmltopdf）中大概率失效。真正可靠的方式是：
- 纯文本页眉页脚：用
@page :first或@page :left+@top-center { content: "xxx"; }，支持counter(page) - 含 logo 或多行 HTML 的页脚：改用文档流结构，例如
<footer class="print-footer"></footer>+display: table-footer-group - 绝对定位弹窗、Tooltip 类组件：打印前统一
display: none !important，或用 JS 移除 DOM 节点（避免占位干扰）
测试时最容易忽略的三个细节
很多问题直到导出 PDF 才暴露，因为 Chrome 打印预览和最终 PDF 渲染仍有差异：
- 打开 Chrome 打印预览（
Ctrl+P），务必勾选「背景图形」——否则所有background-color全部清空 -
break-inside: avoid在 flex 或 grid 容器下会失效，要确保父容器是块级且无transform、overflow: hidden - 用
position: absolute+bottom: 0实现页码时，其父容器必须有position: relative且高度足够，否则会被截断
!important。最稳妥的路径是：放弃在打印时维持定位语义，主动回归文档流，再用语义化结构或 @page 控制位置。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
