打印时position:fixed元素不出现是预期行为，非bug；因打印无视口概念，fixed语义失效，Chrome/Firefox/Safari均跳过渲染，需重置为static并清空top/right/bottom/left/z-index等属性。
打印时 position: fixed 元素完全不出现，不是 bug，是浏览器按 CSS Paged Media 规范执行的预期行为——打印文档没有“视口”，fixed 失去语义支撑，Chrome、Firefox、Safari 均跳过渲染。
为什么 @media print 里写 position: fixed !important 没用
这不是优先级问题，而是底层渲染逻辑决定的：浏览器在打印布局阶段直接忽略 position: fixed 和 position: absolute 的定位计算，连坐标都不参与分页流。加 !important 只会让开发者误以为“再试一次就能行”，实际只会掩盖真实路径。
- Chrome 最激进，常彻底不绘制该元素
- Firefox 有时会渲染但错位（比如全堆到第一页顶部）
- 即使元素可见，
top/left值也失去参照系，行为不可控
必须重置的定位属性不止 position
只写 position: static 是危险的。残留的 top、right、z-index 在计算样式中依然存在，一旦父容器用了 transform 或 flex，这些值可能触发意外偏移或层叠错乱。
- 必须重置：
position、top、right、bottom、left、z-index - 推荐一并重置：
transform（防缩放/位移残留）、will-change（防渲染优化干扰） - 第三方组件（如
.ant-affix、.modal）自带的fixed子节点容易被漏掉，需显式覆盖
需要每页重复的内容，别靠 position 硬塞
想实现 Word 那样的“奇数页页眉”或“所有页底部页码”，用 position: fixed + @media print 重置是走不通的。CSS 打印分页模型不支持跨页复制定位元素。
立即学习“前端免费学习笔记（深入）”；
- 真正可靠的方式是用
@page伪类：@page :first { @top-center { content: "首页页眉"; } } - 纯文本页眉页脚可用
@page :left/:right+content插入，支持计数器（如counter(page)） - 若内容含 HTML（如 logo + 文字），必须改用文档流内结构：
display: table-header-group配合<thead>，或靠break-before: page分页控制
测试时最容易忽略的三个点
很多问题直到导出 PDF 才暴露，因为 Chrome 打印预览和最终 PDF 渲染仍有差异。关键检查项不是“有没有”，而是“位置对不对”“跨页是否断裂”“颜色边框是否消失”。
- 打开 Chrome 打印预览（
Ctrl+P），勾选“背景图形”——否则background-color全部清空 - 对表格、卡片等易跨页容器，加
break-inside: avoid；注意它在flex或grid父容器下会失效 - 打印专用元素（如页码）若用
position: absolute+bottom: 0，必须确保其父容器有position: relative且高度足够，否则会被截断
