打印时position: fixed元素不渲染是css规范要求，因打印无视口导致其失去锚点；@media print中需重置top/right/bottom/left为auto、z-index为auto、transform/will-change为none，并避免用fixed实现页眉页脚。
定位元素在打印时“消失”或“跑到第一页顶部”，不是样式没生效，而是浏览器压根不把它当文档流的一部分处理——position: fixed 和 position: absolute 在打印模式下被规范要求跳过定位计算，你加 !important 也没用。
为什么 position: fixed 在打印时完全不渲染
这不是 bug，是 CSS Paged Media 规范的硬性要求：打印没有“视口”，position: fixed 失去锚定基准，Chrome、Firefox、Safari 在布局阶段直接跳过该元素的定位逻辑——连 top 值都不解析。你看到的“不显示”，其实是它根本没进入渲染管线。
@media print 中必须重置哪些定位属性
只写 position: static 是危险的。残留的偏移和层叠属性仍参与样式计算，可能引发错位或塌陷：
-
top、right、bottom、left必须显式设为auto或0 -
z-index必须设为auto，否则在flex/grid父容器中可能干扰层叠顺序 -
transform和will-change也要重置为none和auto，防止渲染优化残留 - 第三方组件（如
.ant-affix、.el-dialog__header）的子节点常自带position: fixed，需用更具体选择器覆盖，不能只写父选择器
真正需要每页都有的页眉页脚，别用 position 硬塞
用 @media print { .header { position: fixed; } } 这种写法，在 PDF 导出（如 wkhtmltopdf）中大概率失效。真正可靠的方式是：
- 纯文本页眉页脚：用
@page :first或@page :left+@top-center/@bottom-center，支持counter(page) - 含 logo 或多行 HTML 的页脚：改用文档流结构，例如
<footer class="print-footer"></footer>+display: table-footer-group - 绝对定位弹窗、Tooltip 类组件：打印前统一
display: none !important，或用 JS 移除 DOM 节点（避免占位干扰）
最麻烦的不是写不对那几行 CSS，而是你以为改了 position 就完事了，却忘了 transform: scale() 会让 getBoundingClientRect() 返回错误值，也忘了 Chrome 打印预览里勾选「背景图形」才能看到 background-color——这些细节叠加起来，才让打印效果和预期差得最远。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
