因为position: absolute的子元素需相对于最近已定位祖先（relative/absolute/fixed）偏移，父元素设position: relative可创建可靠定位上下文，避免tooltip错位至body左上角或随滚动偏移。
Tooltip 为什么用 position: relative 包裹父元素？
因为 position: absolute 的子元素会相对于最近的「已定位祖先」（即 position 为 relative、absolute 或 fixed 的祖先）进行偏移。如果父容器没设 position: relative，tooltip 就可能相对于 body 或某个意外的父级定位，导致位置飘移。
常见错误现象：tooltip 出现在页面左上角、或随滚动条一起移动、或在按钮右侧几公里外。
- 父容器必须加
position: relative，哪怕它本身不需要偏移 - 不要依赖
div默认的static定位——它不参与定位上下文 - 若父元素已是
absolute或fixed，可跳过这步，但需确认其尺寸和边界是否可控
如何用 top/left 精确控制 tooltip 出现位置？
tooltip 默认放在触发元素上方居中，但实际常需上/下/左/右四种方向。关键不是硬写死像素值，而是结合 transform 做微调，避免因宽高变化导致偏移不准。
例如「顶部提示」：让 tooltip 底边贴住触发元素顶边，并水平居中：
.tooltip::after {
content: "提示文字";
position: absolute;
top: -10px; /* 从触发元素顶边向上退 10px，留出小三角间隙 */
left: 50%;
transform: translateX(-50%); /* 水平居中，不依赖 tooltip 宽度 */
}
-
top: -10px是预留小三角尖角的空间，不是 tooltip 主体高度 - 用
transform: translateX(-50%)比left: calc(50% - width/2)更安全——不用算宽度 - 若要「底部提示」，改
top: 100%+top: 10px；「右侧提示」则用left: 100%+transform: translateY(-50%)
为什么 tooltip 经常被其他元素遮挡？
本质是 z-index 层级没生效。但很多人忽略一个前提：z-index 只对「已定位元素」有效（即 position 不为 static）。即使写了 z-index: 999，若没配 position: absolute，它就完全不起作用。
- tooltip 元素必须同时有
position: absolute和z-index - 避免全局设
* { z-index: 0 }这类重置，会干扰定位流 - 若 tooltip 在 modal 内部显示异常，检查 modal 是否用了
overflow: hidden或clip-path，它们会裁剪绝对定位子元素
怎么让 tooltip 支持鼠标悬停显示、点击关闭、且不闪跳？
纯 CSS 实现 hover 显示最轻量，但「点击关闭」必须用 JS；而闪跳通常源于 :hover 在触发元素和 tooltip 之间断开，导致离开时立刻隐藏。
- 把 tooltip 插在触发元素内部（如
span里），并给 tooltip 加pointer-events: none，再给伪元素设pointer-events: auto，保证悬停区域连续 - 若用 JS 控制显隐，别直接
display: none切换——会导致过渡动画失效；改用visibility: hidden+opacity+transition - 移动端没有
:hover，需额外监听touchstart并加 class 控制显隐
真正麻烦的不是写法，是处理 tooltip 边界碰撞：当它靠近视口边缘时自动翻转方向。这得靠 JS 测量位置，CSS 无解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
