打印时position:fixed元素完全不出现是规范要求，非bug；浏览器在打印布局阶段直接忽略其定位逻辑，必须重置为static并清空top/right/bottom/left/z-index/transform等属性，不可依赖!important。
打印时 position: fixed 元素完全不出现，不是写法错了，也不是优先级不够，而是浏览器按规范主动跳过渲染——它根本没进入打印布局流程。
为什么 @media print { position: fixed !important } 一定无效
这不是 CSS 层叠权重问题，是底层渲染阶段直接剥离：Chrome、Firefox、Safari 在打印分页计算时，会忽略所有 position: fixed 和 position: absolute 的定位逻辑，连 top/left 坐标都不参与计算。加 !important 只会让开发者多试几次，浪费调试时间。
- Chrome 最彻底：元素直接不绘制
- Firefox 有时渲染但错位（比如全堆在第一页顶部）
- 即使“看起来出现了”，
top: 20px在打印中也失去参照系——没有视口，20px 相对于谁？
必须重置的属性不止 position
只写 position: static 是危险的。残留的 top、z-index、transform 会在计算样式中继续生效，一旦父容器用了 transform 或 flex，就可能触发意外偏移或层叠错乱。
- 必须显式重置：
position、top、right、bottom、left、z-index - 推荐一并重置：
transform（防缩放/位移残留）、will-change（防渲染优化干扰） - 第三方组件（如
.ant-affix、.modal）内部的fixed子节点极易被漏掉，需用更具体选择器覆盖
需要每页重复的内容，别靠 position 硬塞
想实现 Word 那样的“奇数页页眉”或“所有页底部页码”，用 position: fixed + @media print 重置是走不通的。CSS 打印分页模型不支持跨页复制定位元素。
立即学习“前端免费学习笔记（深入）”；
- 纯文本页眉页脚：用
@page :first/@page :left+content插入，支持counter(page) - 含 HTML 的内容（如 logo + 文字）：改用文档流内结构，例如
display: table-header-group配合<thead>，或用break-before: page控制分页 - 页码类元素若用
position: absolute+bottom: 0，必须确保其父容器有position: relative且高度足够，否则会被截断
测试时最容易忽略的三个点
很多问题直到导出 PDF 才暴露，因为 Chrome 打印预览和最终 PDF 渲染仍有差异。关键检查项不是“有没有”，而是“位置对不对”“跨页是否断裂”“颜色边框是否消失”。
- 打开 Chrome 打印预览（
Ctrl+P），务必勾选“背景图形”——否则background-color全部清空 - 对表格、卡片等易跨页容器，加
break-inside: avoid；注意它在flex或grid父容器下会失效 -
break-inside对position: absolute或fixed元素完全无效，规范禁止应用分页控制，浏览器静默忽略
真正麻烦的不是写错规则，而是习惯性把屏幕端的定位逻辑直接搬进打印样式——打印没有视口、没有滚动、没有 z-index 层叠上下文，它是一套独立的分页文档模型。越早放弃“让它继续 fixed”的执念，越快写出稳定可用的打印样式。
