必须设position: relative，否则伪元素箭头会相对于body定位而飘到页面角落；需配合width:0、height:0、border三角法、content:""及transform居中，且须排查祖先overflow:hidden导致裁剪。
伪元素画箭头前，必须设 position: relative
气泡容器没加 position: relative，是箭头飘到页面角落的最常见原因。伪元素（::before 或 ::after）一旦脱离定位上下文，就会相对于 body 定位——哪怕你写了 top: 0; left: 0，它也可能出现在屏幕左上角，而不是按钮旁边。
这不是可选优化，而是硬性前提。只要气泡要跟着某个触发元素（比如 <button> 或 <span>）出现，那个元素或它的直接父容器就必须有 position: relative。
- 别只给内部文字容器加，得加在包裹触发元素和提示内容的最外层容器上
- 如果触发元素嵌在
display: flex的父级里，且该父级恰好有position: relative，那箭头就以它为锚点——得确认这是否符合预期 - 用浏览器 DevTools 检查箭头的 computed
position，看它的offsetParent是不是你想要的那个元素
::after 画向下箭头时，width 和 height 必须为 0
三角形箭头本质是四条边框交汇挤出来的视觉效果，前提是元素自身没有宽高。只要 width 或 height 不为 0，边框就变成梯形或带底边的钝角，箭头要么变胖、歪斜，要么直接消失。
同时必须显式声明所有四条边框，哪怕三边是 transparent。漏掉任意一条（比如只写 border-top，不提 border-left），部分安卓 WebView 会整块忽略渲染。
立即学习“前端免费学习笔记（深入）”；
- 向下箭头标准写法：
border-top: 8px solid #333; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid transparent; - 必须加
content: ""，否则伪元素根本不渲染 - IE9–10 不支持
transform，若需兼容，改用left: calc(50% - 8px)（前提是边框宽度固定）
箭头居中不能靠 margin-left，要用 transform 配合 left: 50%
固定像素偏移（如 margin-left: -4px）在缩放、换字体、响应式切换时极易错位。因为三角形底边宽 = border-width × 2（例如 border: 8px solid → 底边宽 16px），而尖顶位置取决于这个几何关系，不是简单减半就能对齐。
真正稳的方式是让伪元素以自身左上角为基准，先移到父容器水平中点，再向左平移自身宽度的一半——但伪元素宽高为 0，所以只能靠 transform: translateX(-50%) 触发浏览器按实际渲染尺寸计算。
- 向下/向上箭头：用
left: 50%; transform: translateX(-50%) - 向左/向右箭头：用
top: 50%; transform: translateY(-50%) - 避免混用
top和transform: translateY()，某些旧版 Safari 会触发亚像素模糊
箭头被裁掉？检查祖先元素的 overflow: hidden
气泡本身没设 overflow: hidden，不代表箭头就安全。只要箭头伸出的路径上，任意一个祖先容器（比如弹出菜单、卡片、模态框）设置了 overflow: hidden，伸出的三角形就会被直接切掉——连半像素都不会留。
这不是 bug，是 CSS 规范行为。而且这种问题在开发时往往看不到（桌面端 hover 正常），一上真机或缩放页面就暴露。
- 用 DevTools 逐层检查祖先节点的
overflow值，特别是那些看起来“只是个容器”的 div - 临时加
outline: 1px solid red可快速定位哪个容器在裁剪 - 修复方式不是删
overflow: hidden（可能影响其他样式），而是把气泡容器提升到更高层级（如用position: fixed+z-index），或改用clip-path精确控制裁剪区域（但注意 IE 和旧 Safari 不支持）
箭头根部与气泡圆角脱节、边缘发虚、移动端点击热区小——这些都不是孤立问题，而是同一套定位逻辑在不同约束下的连锁反应。真正卡住人的，往往是那个没写 position: relative 的父容器，或者某层看不见的 overflow: hidden。
