是预期行为，非bug；浏览器打印时默认忽略position: fixed/absolute，因打印为线性分页流式文档，fixed依赖视口坐标无语义支撑，Chrome/Firefox/Safari均跳过渲染。

打印时 position: fixed 元素完全不出现？这是预期行为，不是 bug

浏览器在 @media print 中默认会忽略 position: fixed 和 position: absolute 的定位效果——不是渲染异常，而是规范要求。打印输出是线性、分页的流式文档，fixed 这类脱离文档流且依赖视口坐标的定位方式没有语义支撑，所以多数引擎（Chrome、Firefox、Safari）直接跳过渲染。

常见现象包括页眉页脚消失、悬浮按钮不见、遮罩层留白。别急着加 !important 或换 position: absolute，那只会让问题更隐蔽。

• 不要试图在 @media print 里保留 fixed 行为——它不会生效
• 如果元素本就该出现在每页（如页眉），应改用 display: table-header-group 配合 ，或靠分页上下文（break-before: always）控制位置
• 若只是“视觉上固定”，实际内容需随正文流动，直接重置为 position: static 或 relative 即可

@media print 中重置 position 必须连带处理 top/left 等偏移

只写 position: static 不够。因为 top、right、z-index 在 static 下完全无效，但它们仍保留在计算样式中，可能干扰后续布局（尤其当父容器有 transform 或 flex 时）。

实操建议统一清空定位相关属性：

• 必须重置：position、top、right、bottom、left、z-index
• 推荐一并重置：transform（避免缩放/位移残留）、will-change（防止渲染优化干扰）
• 示例：

@media print {
  .header-float {
    position: static !important;
    top: auto !important;
    left: auto !important;
    z-index: auto !important;
    transform: none !important;
  }
}

需要每页重复显示的“固定”内容？别用 CSS 定位，用 HTML 语义结构

想实现类似 Word 里的“奇数页页眉”，靠 position: fixed + @media print 重置是走不通的。CSS 打印分页模型不支持跨页复制定位元素。


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载

真正可靠的方式是利用表格头部或分页断点：

• 对表格：把页眉内容放进 ，配合 thead { display: table-header-group; }（这是打印模式下唯一被广泛支持的“每页重复”机制）
• 对普通块级内容：用 break-before: page 或 break-after: page 强制分页，并把标题/说明文字放在每个逻辑区块开头
• 避免依赖 JS 注入打印副本——不同浏览器对 window.print() 期间的 DOM 修改兼容性极差

Chrome 打印预览里样式正常，但 PDF 导出后错位？检查 @page 和盒模型

Chrome 的打印预览和实际 PDF 导出使用两套渲染路径。@page 规则（如 @page { margin: 1cm; }）会影响整个页面上下文，但它会挤压内容区域，导致原本靠 position: relative 微调的元素在 PDF 中偏移。

关键排查点：

• 禁用所有 @page 相关 margin / size 设置，确认是否恢复；若恢复，说明定位元素的 top/left 值是按屏幕视口算的，没适配打印页边距
• 打印专用样式中，慎用 vh/vmax 单位——打印时视口概念不存在，这些单位会被解析为 0 或异常值
• 优先用 em、rem 或绝对单位（pt、mm）定义间距，确保可预测

最稳妥的做法，是把所有打印定位逻辑从“屏幕坐标系”彻底切换到“文档流内嵌位置”，否则总会在某个环节掉链子。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！