position: absolute 元素在 PDF 打印中失效，因其脱离文档流，打印引擎忽略布局计算；需重置为 static 并清空 top/right/bottom/left/z-index/transform 等属性，改用流式布局配合 break-inside: avoid 或 table-header-group/table-footer-group 实现分页控制。
绝对定位元素在打印 PDF 时断页或丢失，不是样式没写对，而是浏览器压根不把它当“可分页内容”处理——它已脱离文档流，打印引擎直接跳过布局计算。
为什么 position: absolute 在 PDF 打印中会失效
Chrome、Firefox、Safari 的 PDF 导出（包括 window.print()）都遵循 CSS Paged Media 规范：打印是线性分页流式文档，没有“视口”，position: absolute 失去包含块锚点，top/right 等值不再有意义。浏览器在布局阶段就忽略该元素，不会渲染，更不会尝试分页归属。你看到的“断开”，其实是它被粗暴塞到第一页左上角后又被截断；“丢失”，则是整个元素被跳过。
常见错误现象：
-
.qr-code { position: absolute; top: 20px; right: 20px; }在 Chrome 打印预览里还在，导出 PDF 后整块消失 - 卡片用
absolute叠加在表格上方，PDF 中卡片错位到页脚外，或只显示一半 - 给
absolute容器加break-inside: avoid完全没反应——该属性对脱离流的元素无效
必须重置的属性不止 position
只写 position: static !important 是危险的。残留的 top、z-index、transform 仍参与样式计算，一旦父容器用了 flex 或 transform: scale(0.95)，就会触发不可控偏移或塌陷。
立即学习“前端免费学习笔记（深入）”；
实操建议统一清空定位上下文：
- 必须显式设为
auto或0：position、top、right、bottom、left、z-index - 推荐一并重置：
transform: none !important、will-change: auto !important - 第三方组件（如
.ant-modal、.el-tooltip）内部常嵌套absolute子节点，需用更具体选择器覆盖，不能只写父类
示例：
@media print {
.print-absolute-box {
position: static !important;
top: auto !important;
left: auto !important;
z-index: auto !important;
transform: none !important;
}
}
真正能控制分页的是文档流，不是定位
break-inside: avoid 只对参与文档流的块级元素有效。想让某块内容不被劈开，得先让它回归流式上下文。
两种可靠路径：
- 删掉
position: absolute，改用position: relative+break-inside: avoid+page-break-inside: avoid双保险。确保父容器有position: relative且高度足够（防top溢出） - 若无法改子元素（如 UI 库强依赖
absolute），在外层套一个流式<div class="print-wrapper">，给 wrapper 加break-inside: avoid和最小高度兜底
注意：break-inside: avoid 在 flex 或 grid 父容器下会失效，wrapper 必须是普通块级容器。
页眉页脚别再靠 position: fixed 强撑
所有试图用 @media print { .header { position: fixed; } } 实现每页重复内容的写法，在 PDF 导出中基本不可靠。规范不支持跨页复制定位元素。
替代方案：
- 纯文本页眉/页脚：
@page :first { @top-center { content: "合同首页"; } }，支持counter(page) - 含 logo 或多行 HTML 的页脚：用
<footer class="print-footer">+display: table-footer-group - 需要每页顶部出现的标题：把内容放进
<thead>，配合thead { display: table-header-group; }
测试时务必导出 PDF——Chrome 打印预览和最终输出差异极大，尤其涉及颜色、边框、背景图（记得勾选「背景图形」）。
最易被忽略的一点：很多“固定”元素其实是 JS 动态插入的伪定位（比如基于滚动计算的 top 值），这类 DOM 在打印时根本不在初始文档流中，重置 CSS 无效，必须在 window.print() 前用 JS 预处理或替换为静态结构。
