position: fixed 在打印时不渲染是规范要求而非 bug，因打印无视口导致其失去锚点；需重置 position、top、right、bottom、left、z-index 及 transform、will-change，并用 @page 或文档流实现页眉页脚。
为什么 position: fixed 在打印时直接不渲染
这不是 bug，是 CSS Paged Media 规范的明确要求：打印文档没有“视口”，position: fixed 失去锚定基准，Chrome、Firefox、Safari 均跳过渲染。你加 !important 也没用——浏览器压根不进入定位计算流程，连 top 值都不解析。
必须重置的属性不止 position
只写 position: static !important 是危险的。残留的 top、right、z-index 仍参与样式计算，一旦父容器用了 transform 或 display: flex，就可能触发意外偏移或层叠错乱。
- 必须一并重置：
position、top、right、bottom、left、z-index - 推荐加：
transform: none !important、will-change: auto !important - 第三方组件（如
.ant-affix、.el-dialog__header）的子节点常自带position: fixed，需显式覆盖，不能只写父选择器
用 @page 替代 position: fixed 实现页眉页脚
想让内容每页都出现，别靠 position: fixed + @media print 强撑。CSS 分页模型不支持跨页复制定位元素，这种写法在导出 PDF 时大概率失效。
- 纯文本页眉/页脚：
@page :first { @top-center { content: "首页标题"; } }，支持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父容器下会失效 - 打印专用元素若用
position: absolute+bottom: 0，必须确保其父容器有position: relative且高度足够，否则会被截断
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
