absolute元素只能相对于最近的已定位祖先定位，不能相对于兄弟元素；必须通过共同父容器（设position:relative）作为锚点，再结合JS计算坐标实现视觉附着。
做不到。absolute 元素不会、也不能相对于兄弟元素定位 —— 它只认“已定位的祖先”，不听兄弟的话。
为什么兄弟元素不能当参考点？
CSS 规范里明确写了：absolute 的包含块（containing block）是“最近的已定位祖先元素”（即 position 值为 relative、absolute、fixed 或 sticky 的父级/祖父级），不是同级的兄弟。
哪怕兄弟元素设置了 position: relative，它和当前元素没有祖孙关系，就只是“隔壁工位”，没权限当定位上下文。
常见错误现象：以为加了 relative 就能“拉过来”
- 给兄弟元素设了
position: relative，自己设position: absolute，结果还是相对于body或更上层祖先偏移 - 用
top: 0; left: 0期望贴在兄弟左边，实际跑到视口左上角 - 调试时发现
getBoundingClientRect()返回的位置和预期偏差很大，因为参考系错位了
真正可行的替代方案
想让一个元素视觉上“附着”在兄弟旁边，必须引入共同父容器作为定位锚点：
立即学习“前端免费学习笔记（深入）”；
-
父容器加
position: relative（提供定位上下文） -
两个兄弟都保持静态流布局（比如用
display: flex或grid控制顺序和间距） -
需要“嵌入感”的那个元素才设
position: absolute，并用top/left等基于父容器计算偏移
例如：要让 .tooltip 紧贴 .btn 右侧，不能让 .tooltip 相对 .btn 定位，而是把它们包进一个 position: relative 的 .wrapper，再用 JS 获取 .btn 的 getBoundingClientRect()，算出绝对坐标后赋给 .tooltip 的 style.left 和 style.top。
容易被忽略的复杂点
即使你用 JS 动态计算位置，也要注意：父容器若存在 transform、perspective 或 filter，会创建新的包含块，导致 absolute 元素的参考系悄悄变了 —— 这时候 getBoundingClientRect() 返回的是相对视口的值，但 absolute 实际按父容器定位，数值不能直接套用，得手动减去父容器偏移。
