打印时fixed元素出现在每页顶部是因浏览器将fixed视为视口固定，而打印无滚动概念；应通过@media print重置为static/relative，用@page伪类控制页眉页脚，并优先使用mm/cm单位微调。
打印时 position: fixed 元素跑到第一页顶部了
这是最典型的打印定位异常：浏览器把 fixed 元素当作“始终固定在视口”，但打印时没有“滚动视口”概念，它会强行渲染在每页左上角（或按 top/left 偏移）——哪怕你本意是让它只在首页显示为页眉。
解决思路不是删掉 fixed，而是用媒体查询重置它的定位行为：
- 在
@media print中将position: fixed改为static或relative - 配合
display: none隐藏不需要重复出现的元素（比如导航栏） - 对真正需要每页都有的页眉/页脚，改用
@page的:first/:left/:right伪类控制，而不是靠 CSS 定位硬塞
@media print 里哪些定位属性会失效或表现异常
z-index、transform、clip-path 在多数浏览器打印预览中基本被忽略；top/right/bottom/left 对非 absolute/fixed 元素无效；而 absolute 元素的定位基准是「当前分页区域」，不是整个文档流——这意味着跨页内容可能被截断或错位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 避免在打印样式中使用
transform: translate()调整位置，改用margin或padding - 把需要精确定位的打印专用元素（如页码）放在文档流末尾，用
position: absolute+bottom: 0，并确保其父容器有position: relative和足够高度 - 测试时打开 Chrome 打印预览（
Ctrl+P），不要只看屏幕样式
如何让页眉只出现在首页，页脚出现在所有页底部
不能依赖 :first-child 或 JS 动态加 class，因为打印分页是浏览器自动触发的，DOM 结构没变。正确方式是组合使用 @media print 和 @page：
@media print {
.header-first-page { display: block; }
.header-all-pages { display: none; }
.footer-all-pages { display: block; }
}
<p>@page :first {
@top-center {
content: element(header-first-page);
}
}</p><p>@page {
@bottom-center {
content: element(footer-all-pages);
}
}</p><p>/<em> 配合 HTML 中的标记 </em>/
<div class="header-first-page" style="position: absolute; top: 0; width: 100%; height: 0;">
<div style="position: fixed; top: 0;">仅首页页眉</div>
</div>
<div class="footer-all-pages" style="position: absolute; bottom: 0; width: 100%; height: 0;">
<div style="position: fixed; bottom: 0;">所有页页脚</div>
</div>注意：element() 函数目前仅 Chromium 系浏览器（Chrome / Edge）支持，Firefox 已废弃，Safari 不支持。生产环境需降级处理：用 JS 插入重复页脚，或接受纯 CSS 方案的局限性。
打印时元素位置偏移几毫米，怎么微调
打印引擎对 px 单位的解析精度有限，且不同打印机 DPI、驱动、纸张设置都会影响最终效果。别用 px 做打印定位单位。
推荐做法：
- 统一用
mm或cm（物理单位），例如margin-top: 15mm - 避免嵌套多层
position: relative，打印时层级计算容易失准 - 给关键定位容器加
box-sizing: border-box，防止padding和border溢出干扰位置 - 如果必须像素级控制，可在
@media print中用zoom: 0.98（Chrome）或transform: scale(0.98)（慎用，可能模糊文字）临时补偿
实际调试时，先用 A4 尺寸纸张打印一张，拿尺子量偏差，再反推 CSS 值——比凭空猜更可靠。
