Vue 的 Teleport 组件无法将内容传送到 <html> 或 <body> 之前，只能挂载到已存在的 DOM 节点内部末尾；实现水印“最底层”效果需传送至 <body> 并配合 position: fixed、z-index: -1、pointer-events: none 及全局样式控制。
Vue 的 Teleport 组件不能将内容传送到页面“最底层”（如 <html> 或 <body> 之前），它只能将内容移动到指定 DOM 节点内部的末尾位置，且该节点必须已存在、可访问。所谓“最底层”，在 DOM 渲染层级中实际并不存在——浏览器渲染遵循文档流和层叠上下文（stacking context），真正决定“谁在最底下”的是 z-index、position 和层叠顺序，而非插入位置的先后。
但如果你的目标是：
✅ 让水印背景（半透明文字/图案）视觉上处于所有内容之下，
✅ 不被其他组件遮挡，
✅ 同时避免被父级 overflow: hidden 或 transform 等创建新层叠上下文的样式截断，
那正确做法是：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
水印组件应传送到 <body>，并用 CSS 确保其处于底层
<!-- Watermark.vue -->
<template>
<Teleport to="body">
<div
v-if="enabled"
class="watermark-overlay"
:style="{
'--wm-text': `'${text}'`,
'--wm-font-size': `${fontSize}px`,
'--wm-opacity': opacity,
}"
/>
</Teleport>
</template>
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
enabled: { type: Boolean, default: true },
text: { type: String, default: 'CONFIDENTIAL' },
fontSize: { type: Number, default: 60 },
opacity: { type: Number, default: 0.03 },
})
</script>
<style scoped>
.watermark-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1; /* 关键：设为负值，压到所有常规内容之下 */
background:
linear-gradient(
30deg,
transparent 45%,
rgba(0, 0, 0, v-bind(opacity)) 50%,
transparent 55%
),
linear-gradient(
-30deg,
transparent 45%,
rgba(0, 0, 0, v-bind(opacity)) 50%,
transparent 55%
);
background-size: 200px 200px;
background-position: 0 0, 100px 100px;
/* 可选：用伪元素叠加文字水印 */
}
.watermark-overlay::before {
content: var(--wm-text);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-30deg);
font-size: var(--wm-font-size);
font-weight: bold;
color: rgba(0, 0, 0, v-bind(opacity));
opacity: 1;
pointer-events: none;
z-index: -1;
}
</style>关键点说明：
-
Teleport to="body"是必要操作：确保水印脱离任意父组件的层叠上下文限制（比如某个position: relative+z-index: 10的容器会把子元素“框死”）； -
z-index: -1是实现“最底层”的核心：只要页面没有其他元素显式设置z-index: -2或更低，它就会自然位于绝大多数内容之下； -
pointer-events: none防止遮挡交互：用户点击时能穿透水印，不影响下方按钮、输入框等； -
不依赖
::backdrop或::before在<html>外插入：DOM 标准不允许，Teleport也无法做到；<body>就是最接近“全局底层”的合法锚点。
注意事项：
- 确保
<body>在组件挂载时已存在（通常没问题，但 SSR 或极端微前端场景需验证）； - 若项目使用了
createApp(...).mount('#app')，且#app是<body>的唯一子节点，那么Teleport to="body"是安全且推荐的； - 不要尝试
to="html"或to="document"—— 这些选择器无效，Teleport会静默失败或报错； - 如果页面有多个水印组件，它们都会插入到
<body>末尾，靠z-index控制层级，不会互相覆盖（除非你主动设相同z-index）。
本质上，水印不是靠“物理位置最低”实现底层效果，而是靠 固定定位 + 负 z-index + 无交互 + 全局挂载 四者协同达成视觉与功能上的“最底层”。
