伪元素箭头在Grid中飘走，是因为气泡子项未设position: relative，导致absolute伪元素向上查找定位上下文；必须为气泡自身显式设置position: relative并配合z-index，同时用top/right+transform精准控制箭头位置与尺寸。
伪元素箭头在Grid容器里飘走，是因为没设position: relative
Grid本身不提供定位上下文，::before或::after用position: absolute时，会跳过Grid容器直接找上层position: relative祖先——常见结果是箭头钉在视口左上角。必须给气泡自身（即Grid子项）显式加position: relative，不能只依赖Grid父容器的display: grid。
容易踩的坑：
- 误以为
grid-area或place-self能替代定位上下文——它们只控制网格轨道内位置，不影响absolute参照系 - 给Grid容器（父级）设
position: relative，但气泡子项是position: static（默认值），此时伪元素仍会继续向上找 - 气泡用了
align-self: start等对齐，但忘了伪元素的top/left是相对于气泡内容区，不是网格线
Grid布局下箭头方向与定位值要匹配气泡在网格中的实际位置
比如气泡放在grid-column: 2、grid-row: 1，右侧有空列，想让箭头朝右，就不能只写right: 100%——得确认气泡右边距是否真有空间；若网格列宽固定为1fr，且气泡占满该列，则right: 100%会让箭头从列右边界伸出，而非气泡右边缘。
实操建议：
- 箭头定位优先用
top/bottom/left/right配合margin微调，而不是transform，避免Grid重排干扰 - 向右箭头示例：
.bubble--right::after { content: ""; position: absolute; top: 50%; right: -8px; margin-top: -6px; width: 0; height: 0; border: 6px solid transparent; border-left-color: #333; } - 若气泡被
justify-self: end推到列末尾，right: -8px才真正对应气泡右边缘；若用justify-self: center，则需改用right: 50%再配transform: translateX(50%)
Grid + 响应式中伪元素尺寸和偏移容易错位
Grid的fr单位和minmax()会让气泡宽高动态变化，但伪元素的border-width（决定箭头大小）和margin-top（用于垂直居中）若写死px，在小屏下就会撑破或偏移。更麻烦的是，某些安卓WebView对伪元素中calc()支持弱，margin-top: calc(-1 * 6px)可能被忽略。
稳妥做法：
- 箭头尺寸统一用
rem或em，例如border: 0.375rem solid transparent（6px = 0.375rem，假设根字号16px） - 垂直居中改用
top: 50%+transform: translateY(-50%)，比margin-top: -0.375rem兼容性更好 - 媒体查询里必须同步覆盖伪元素样式，不能只调气泡本体；例如
@media (max-width: 480px) { .bubble::after { border-width: 0.25rem; } }
多气泡Grid列表中z-index失效或层叠错乱
Grid子项默认z-index: auto，即使给气泡设了z-index: 1，伪元素的z-index: 2也可能被同级其他气泡盖住——尤其当气泡DOM顺序和网格渲染顺序不一致时（如用grid-auto-flow: dense）。
关键点：
- 伪元素的
z-index只在它父元素的层叠上下文中生效；若气泡没设position，z-index无效 - 所有气泡必须统一设
position: relative+z-index: 1，伪元素再设z-index: 2，才能确保箭头永远在气泡上方、不被相邻气泡遮挡 - 若气泡带
box-shadow，伪元素默认在阴影下方；加z-index: 2可让它浮在阴影上，但需确认父容器没设overflow: hidden，否则箭头被裁切
Grid里伪元素箭头看着简单，真正卡住人的永远是三层叠加：Grid轨道计算、气泡自身定位上下文、伪元素相对偏移——这三者稍有不匹配，箭头就“飞”了。最省事的验证方式：临时给气泡加个outline: 1px solid red，看箭头是否贴着这个轮廓边缘，而不是网格线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
