问题通常就卡在这里：如果父容器没有设置 position: relative，::after 会持续向上寻找最近的已定位祖先元素；一旦始终没有找到，最终就会直接以 作为定位参照。至于使用 border 绘制 CSS 三角形提示箭头，核心要点有三项：第一，元素本身的宽度和高度必须为 0；第二，只给其中一条边设置颜色，其余三条边统一设为 transparent；第三，箭头朝向由着色的那一条边决定，而三角形的大小则由 border-width 控制。
为什么::after箭头总飘到页面左上角？
原因通常是父容器没有设置 position: relative。::after 作为绝对定位伪元素，会优先向上查找最近的已定位祖先元素，也就是 position 为 relative、absolute 或 fixed 的父级节点。如果始终找不到，它就会默认相对于 进行定位，因此箭头看起来就会跑到页面左上角或其他错误位置。
要想让 CSS 提示箭头准确跟随目标元素，必须确保箭头的直接父元素具备 position: relative；另外，如果中间某一层意外设置了 position: absolute，同样会打断原本的定位链。实际排查时，可以借助 DevTools 查看 ::after 的 offsetParent，快速确认当前定位基准是否正确。
怎么用border画出方向可控的三角形箭头？
实现方法的关键，是让 ::after 的宽高都为 0，然后只保留单边有颜色的 border，其余三边明确设置为 transparent。浏览器在渲染边框交汇处时，会在角上形成一个等腰直角三角形。严格来说，这并不是一个真实图形，而是利用边框产生的视觉效果，但它稳定、轻量、无需图片，而且缩放也很方便，因此常用于 tooltip 箭头、气泡提示箭头等场景。
border-top-color: #333→ 箭头向下（尖端朝下）border-bottom-color: #333→ 箭头向上（尖端朝上）border-left-color: #333→ 箭头向右（尖端朝右）border-right-color: #333→ 箭头向左（尖端朝左）
border-width 用来控制三角形箭头的尺寸，例如设置为 6px；同时四条边最好都完整声明，避免遗漏透明边，否则在某些浏览器环境下可能会回退显示成黑色，影响最终样式表现。
如何精准把箭头贴在元素右侧/顶部/底部中央？
更稳妥的做法，是通过 top/right/bottom/left 配合 transform 来完成定位，而不是依赖 margin，因为不同浏览器或字体渲染差异，往往会让 margin 方案产生轻微错位。
- 右侧箭头：
right: -10px; top: 50%; transform: translateY(-50%) - 顶部箭头：
top: -6px; left: 50%; transform: translateX(-50%) - 底部箭头：
bottom: -6px; left: 50%; transform: translateX(-50%) - 左侧箭头：
left: -10px; top: 50%; transform: translateY(-50%)
需要注意的是，这些数值都应与 border-width 保持联动。例如当 border-width: 6px 时，设置 top: -6px 才能让箭头尖端刚好贴合元素边缘，实现更精准的对齐效果。
带边框的箭头或圆角气泡里怎么避免露白边？
如果只使用单个 ::after 通过 border hack 绘制箭头，在高倍缩放、Retina 屏幕或圆角气泡容器中，比较容易出现锯齿、白边或边缘发虚的问题。想要获得更干净、更专业的视觉效果，推荐使用双伪元素嵌套方案：
::before：设置border: 6px solid transparent，并仅给目标方向上色（例如border-top-color: #333），作为外层边框::after：设置border: 5px solid transparent，同样在对应方向上色（例如border-top-color: #fff），作为内层背景
两个伪元素的 top/left 必须保持完全一致。更直接的做法是先用像素级方式把位置统一对齐，例如都设置为 top: -6px; left: 50%，然后只通过 transform: translateX(-50%) 来完成水平居中。原因也很简单，任何额外的 translate() 都可能带来 subpixel 级别的细微偏移，尤其在 Retina 高分辨率屏幕上，这种误差更容易把原本不明显的白边放大出来。
