悬停弹出框不能用固定 top/left 值，因易被裁剪、遮挡或错位；必须基于触发元素几何信息动态定位，calc() 是纯 css 中实现相对运算的唯一方式。
悬停弹出框的定位逻辑为什么不能只靠 top/left 固定值
固定写死 top: 20px; left: 20px 看似简单，但实际会立刻失效：弹出框可能被裁剪（父容器 overflow: hidden）、遮挡目标元素、或在不同尺寸屏幕/缩放下错位。真正可靠的定位必须基于触发元素的几何信息动态计算——而 calc() 是唯一能在纯 CSS 中做这种“相对运算”的工具。
关键前提是：弹出框需与触发元素同级或嵌套在可定位祖先内，且触发元素本身要有明确的 position（通常是 relative）。
用 calc() 实现“贴着元素上方居中”弹出的写法
这是最常见需求：鼠标悬停时，对话框出现在触发元素正上方，水平居中，留一点间距。核心是把弹出框的 top 和 left 用 calc() 绑定到触发元素的 offsetTop 和 offsetWidth ——但注意：CSS 无法直接读取 JS 的 offset 属性，所以得换思路：利用伪元素 + transform 配合 calc() 模拟。
- 给触发元素设
position: relative - 弹出框用
position: absolute，并放在触发元素内部（或同级 +z-index控制） -
top设为calc(-100% - 8px)：-100% 把弹出框顶边拉到触发元素顶边，再上移 8px 留间隙 -
left设为calc(50% - (var(--popup-width) / 2))：先移到触发元素水平中心（50%），再向左偏移自身宽度一半；--popup-width需提前定义，例如style="--popup-width: 240px;"
示例：
.trigger {
position: relative;
}
.trigger:hover .tooltip {
opacity: 1;
visibility: visible;
}
.tooltip {
--popup-width: 240px;
position: absolute;
top: calc(-100% - 8px);
left: calc(50% - (var(--popup-width) / 2));
width: var(--popup-width);
opacity: 0;
visibility: hidden;
transition: opacity 0.2s;
}
遇到 calc() 计算失败的三个典型错误
calc() 对空格和单位极其敏感，写错一个字符就整个声明失效（浏览器会静默忽略该属性）。
- 加减号前后**必须有空格**：
calc(100% - 20px)✅，calc(100%-20px)❌ - 不能混用单位：
calc(50% + 1em + 2px)✅（所有项都可转为长度），但calc(50% + 1rem + 2vh)在某些旧浏览器可能计算异常 - 括号嵌套层级过多易出错，避免
calc(calc(100% / 2) - 10px)，直接写calc(50% - 10px)
调试技巧：把 calc() 表达式单独复制进浏览器控制台，用 getComputedStyle(el).top 查看是否返回有效值；若返回 auto 或空字符串，说明计算被丢弃了。
移动端悬停失效？别依赖 :hover 做核心交互
手机和平板没有“悬停”概念，:hover 在触摸设备上行为不一致（比如 iOS Safari 只在第一次点击后临时激活，之后又失效）。如果弹出框承载重要信息或操作，必须用 JavaScript 切换类名（如 .is-open），并配合 @media (hover: hover) 做渐进增强。
纯 CSS 方案仅适合辅助性提示（如图标说明文字），且要确保：弹出框内容不影响主流程，且默认状态可访问。否则，用户手指点一下没反应，就会认为功能坏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
