用 position: absolute 实现 tooltip 在元素上方时，父容器必须设 position: relative（或 absolute/fixed），top 设负值（如 -36px）以抵消 tooltip 高度与间距，配合 left: 50% 和 transform: translateX(-50%) 居中，伪元素方案更稳妥。
用 position: absolute 实现 tooltip 在元素上方，top 要设负值
直接给 tooltip 设置 position: absolute 并配 top: -Xpx 是可行的，但前提是父容器必须是 position: relative（或 absolute/fixed），否则 top 会相对于最近的定位祖先，甚至 body，导致位置漂移。
- tooltip 元素需放在触发元素内部或紧邻其后，且两者共用同一个定位上下文父容器
-
top的负值大小取决于 tooltip 自身高度 + 期望的间距（比如 tooltip 高 32px，想离触发元素留 4px 空隙，则top: -36px） - 别忘了加
left: 50%和transform: translateX(-50%)居中对齐，否则默认左对齐容易偏 - 若触发元素有
padding或border，计算时要一并考虑，否则 tooltip 上边缘可能卡在内边距里
常见错位原因：父容器没设 position: relative
这是最常踩的坑。比如把 tooltip 直接塞进 <body> 或放在一个纯 div 里却没加定位属性，top: -20px 就会相对于视口顶部上移，而不是贴着触发元素。
- 检查 tooltip 的**最近定位祖先**是否为预期的包裹容器（用浏览器开发者工具看 computed position）
- 如果触发元素本身是
position: absolute，它的父容器仍需设position: relative才能成为定位上下文 - Flex/Grid 容器不会自动创建定位上下文，该加
relative还得加
更稳妥的写法：用 data-tooltip + CSS 伪元素避免额外 DOM
不用单独写 tooltip 元素，改用 ::before/::after 生成气泡，配合 top: -100% + bottom: 100% 组合，可规避定位祖先混乱问题。
.trigger {
position: relative;
}
.trigger:hover::after {
content: attr(data-tooltip);
position: absolute;
top: -100%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
z-index: 10;
}
注意：top: -100% 表示向上移动自身高度的 100%，比固定像素值更适应不同字号/内容长度；但要求触发元素不能有 overflow: hidden，否则会被裁掉。
立即学习“前端免费学习笔记（深入）”；
移动端适配和 z-index 冲突要手动验证
在 iOS Safari 或某些安卓 WebView 中，z-index 行为可能异常，尤其是 tooltip 被其他 fixed 元素（如底部导航栏）遮挡时。
- 确保 tooltip 的
z-index明显高于周围组件（比如设成9999） - 避免在
transform或will-change的父元素里嵌 tooltip，这会创建新的层叠上下文，让z-index失效 - 真机测试时，留意点击区域是否被 tooltip 挡住——它虽在上方，但若没设
pointer-events: none，会拦截后续点击
top 的负值不是拍脑袋定的，而是先测 tooltip 高度（getBoundingClientRect().height），再动态设置，尤其当内容动态变化时。静态写死只适合固定文案场景。 
