iframe水印必须用容器包裹，不能直接操作iframe元素；需用div包裹iframe并在其上叠加pointer-events: none的SVG水印层，避免遮挡交互，且须处理跨域PDF滚动时的动态定位。
iframe水印必须用容器包裹，不能直接操作iframe元素
iframe本身是独立文档上下文，iframe标签不支持伪元素、::before或background-image等CSS水印手段。强行给iframe加position: relative或::after在所有主流浏览器中均无效——它会忽略渲染，或导致布局错乱。唯一可靠路径是：用一个div把iframe包起来，再在这个div上叠加水印层。
水印层需设pointer-events: none，否则交互失效
常见错误是水印遮挡iframe内容，导致无法点击、滚动、选中文本。这是因为绝对定位的水印层默认会捕获鼠标事件。解决方法非常明确：
- 水印元素（如
div或svg）必须显式设置style="pointer-events: none" - 如果水印内含文字且需防选中，额外加
user-select: none - 不要对水印父容器设
pointer-events: none，否则整个容器都失活
SVG水印比div+text更稳定，尤其适配缩放与高DPI屏
用div内嵌文字做水印，遇到页面缩放、字体抗锯齿或不同系统渲染差异时，容易出现模糊、偏移或截断。SVG则天然矢量、无损缩放，推荐写法：
<div class="iframe-wrapper">
<iframe src="report.pdf" width="100%" height="600"></iframe>
<svg viewBox="0 0 200 200" class="watermark-svg">
<text x="50%" y="50%" transform="rotate(-30)" text-anchor="middle" dominant-baseline="middle" fill="#999" font-size="48" opacity="0.12">CONFIDENTIAL</text>
</svg>
</div>
关键点：viewBox让SVG自适应容器宽高；transform="rotate(-30)"比CSS transform更精准；opacity设为0.12左右，淡到不干扰阅读但又清晰可辨。
立即学习“前端免费学习笔记（深入）”；
PDF文档嵌入时，水印位置易随滚动错位，需监听scroll重定位
当iframe加载的是PDF（尤其是长文档），用户滚动时，若水印用position: absolute固定在容器左上角，会出现“水印不动、内容动”的错觉。这不是bug，而是absolute定位相对于父容器静态坐标系所致。真实场景中必须处理：
- 给包裹
div设position: relative且overflow: auto - 水印层改用
position: sticky+top: 20px（仅适用于单页PDF或短内容） - 对长PDF，更稳妥的是用
IntersectionObserver监听iframe可视区域变化，动态调整水印top/left - 避免用
position: fixed——它会让水印脱离容器流，响应式布局下极易错位
最常被忽略的是：PDF iframe 的scrollHeight和contentDocument在跨域时不可读，所以任何依赖其尺寸的JS定位逻辑，必须先判断iframe.contentDocument是否存在，否则报Blocked a frame from accessing a cross-origin frame错误。
