因为没给父容器设position: relative，::after会向上查找最近已定位祖先，找不到就相对于定位；用border画三角形需宽高为0、单边有色、其余三边transparent，方向由设色边决定，大小由border-width控制。
为什么::after箭头总飘到页面左上角？
因为没给父容器设 position: relative。::after 是绝对定位元素，它会向上查找**最近的已定位祖先**（即 position 值为 relative、absolute 或 fixed 的父级）。如果找不到，就默认相对于 定位——箭头自然飞走。
必须确保箭头的直接父元素有 position: relative；中间某层意外加了 position: absolute 也会截断定位链，用 DevTools 检查 ::after 的 offsetParent 就能确认基准是否正确。
怎么用border画出方向可控的三角形箭头？
核心是让 ::after 宽高为 0，只设单边有色 border，其余三边显式声明为 transparent。浏览器渲染边框交汇时，在角上“挤”出等腰直角三角形——这不是真图形，是视觉错觉，但稳定、无图、可缩放。
-
border-top-color: #333→ 箭头向下（尖端朝下） -
border-bottom-color: #333→ 箭头向上（尖端朝上） -
border-left-color: #333→ 箭头向右（尖端朝右） -
border-right-color: #333→ 箭头向左（尖端朝左）
border-width 控制大小，比如 6px；四边必须都写全，漏掉透明边在某些浏览器里会 fallback 成黑色。
立即学习“前端免费学习笔记（深入）”；
如何精准把箭头贴在元素右侧/顶部/底部中央？
靠 top/right/bottom/left + transform 组合，不依赖 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 完全一致，不加 transform，靠像素级对齐（例如都设 top: -6px; left: 50%），再用 transform: translateX(-50%) 居中。任何 translate() 都可能导致 subpixel 错位，尤其在 Retina 屏上露白边。
