position: fixed 在打印时无效，因分页模型无视口基准，浏览器跳过其定位计算；应改用 @page 规则、table-footer-group 或移除 dom 实现页眉页脚。
它不是“丢失”，而是被浏览器主动跳过渲染——这是 CSS Paged Media 规范的强制行为，不是 bug，也不是优先级问题。
为什么 @media print 里写 position: fixed !important 完全无效
打印时没有“视口”概念，position: fixed 失去锚定基准，浏览器在布局阶段直接跳过该元素的定位计算流程。Chrome、Firefox、Safari 均如此：连 top 值都不解析，更不会参与分页流。加 !important 只会让开发者多试几次，但路径本身是错的。
- Chrome 最激进：常彻底不绘制该元素
- Firefox 有时会渲染，但全部堆到第一页顶部，后续页不再出现
- 即使“可见”，
top/left也失去参照系，位置不可控
只重置 position: static 为什么危险
残留的偏移和层叠属性仍在计算样式中存在，一旦父容器用了 transform、display: flex 或 grid，就可能触发意外错位、塌陷或层叠遮挡。
- 必须一并重置：
position、top、right、bottom、left、z-index - 推荐加：
transform: none !important、will-change: auto !important - 第三方组件（如
.ant-affix、.el-dialog__header）子节点常自带position: fixed，需显式覆盖，不能只写父选择器
想实现每页都有的页眉页脚，该用什么替代 position: fixed
靠 @media print { .header { position: fixed; } } 是伪解法，在 PDF 导出（如 wkhtmltopdf）中大概率失效。CSS 分页模型不支持跨页复制定位元素。
- 纯文本页眉/页脚：
@page :first { @top-center { content: "首页标题"; } }，支持counter(page) - 含 logo 或多行 HTML 的页脚：改用文档流结构，例如
<footer class="print-footer"></footer>+display: table-footer-group - 绝对定位弹窗、Tooltip 类组件：打印前统一
display: none !important，或用 JS 移除 DOM 节点（避免占位干扰）
真正难的不是写对规则，而是意识到：打印时的“位置”不是靠定位语义维持的，而是靠分页上下文与文档流结构共同决定的。哪怕你写了十行 !important，只要没回归流、没配对 @page、没处理好父容器的 position: relative 和高度，页码就可能被截断，页脚就可能消失在纸张边缘之外。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
