用 relative 是为让按钮保留在文档流中并作为气泡定位参考；气泡不必是直接子元素但强烈推荐，否则易因 containing block 变化导致错位；尖角对齐靠伪元素加 transform 微调；移动端需 JS 控制显隐，不可单靠 :hover。
为什么用 position: relative 而不是 position: absolute 直接套按钮？
因为 absolute 元素会脱离文档流，如果直接给按钮加 absolute，它就不再占据空间，可能导致后续元素上移、布局错乱。而把按钮设为 relative，它仍保留在正常流中，同时为子元素（气泡）提供定位参考——这是实现「按钮不动、气泡贴边」的关键前提。
气泡元素必须是按钮的直接子元素吗？
不是必须，但强烈推荐。否则需额外指定 top/left 偏移量，且容易受父容器 transform、perspective 或 filter 影响（这些属性会创建新的 containing block，导致气泡相对错位）。常见错误现象：
.btn { position: relative; }
.tooltip { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); }——这行得通，但前提是 .tooltip 是 .btn 的子元素。若放在 body 底下，top: 100% 就是相对于 viewport 顶部，不是按钮底部。
如何让气泡尖角对齐按钮中心？
靠伪元素 + transform 微调。核心是：气泡本身水平居中，再用 ::before 画三角，并用 transform: translateX(-50%) 把三角中心对齐气泡中心。注意两点：
- 三角的
left: 50%是相对于气泡容器，不是按钮 - 如果按钮有圆角或内边距，尖角位置可能需要手动偏移（比如
left: calc(50% + 4px)）
.btn { position: relative; }
.tooltip { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 4px; }
.tooltip::before { content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 8px; height: 8px; background: #333; }
移动端点击后气泡不消失？别只依赖 :hover
:hover 在触摸设备上行为不可靠（部分 Android 会触发一次，iOS 可能完全不触发）。真实项目中必须配合 JS 控制显隐，比如监听 click 切换 is-active 类，再用 CSS 控制 opacity 和 visibility。否则用户点开看不到、点关闭没反应，就是这个原因。
容易踩的坑：
– 用 display: none 动画不生效
– 忘记给 .tooltip 加 pointer-events: none，导致遮挡按钮点击
– 气泡 z-index 不够高，被其他层盖住
立即学习“前端免费学习笔记（深入）”；
