根本原因是absolute元素定位参考最近非static祖先，中间static父级全被跳过；如.parent未设relative，.child将直接相对于.grand定位，导致位置失控。
为什么嵌套多层的 position: absolute 元素会“飘走”
根本原因不是层数多，而是浏览器只认「最近一个非 static 的祖先」作为定位参考——中间所有 position: static（包括默认值）的父级全被跳过。比如 .grand → .parent（没设 position）→ .child（position: absolute），那 .child 实际参考的是 .grand，而不是你直觉里的 .parent。
常见错误现象：.parent 有 padding 或 border，但 .child 的 top: 0; left: 0 却没贴住内边；或者改了某层组件的 class，整个弹窗位置突变。
- 第三方 UI 库（如 Ant Design、Element Plus）中，
.dropdown或.popover内部往往已设position: relative，你的absolute子元素可能意外绑定到它身上 - Flex / Grid 容器即使设置了
display: flex或grid，只要没显式声明position，就不会成为定位上下文 - 用浏览器开发者工具检查
Computed面板里的position值，比看 HTML 结构更可靠
position: relative 必须加在哪一层？
加在你「想让它当爹」的那一层，且必须是直接或间接包含目标 absolute 元素的祖先。它本身不需要 top/left 偏移，也不影响文档流位置。
- 如果希望
.badge相对于.card定位，就给.card加position: relative - 如果
.card是封装好的 React 组件，内部已含position: relative，那你再在外层加一层relative反而会让.badge参考错对象 - 避免给
.parent设position: absolute后再放absolute子元素——这会让子元素参考点变成更上层的定位祖先，行为难预测
多层 absolute 嵌套时 top/left 的计算起点
始终从「定位参考元素」的 padding box 边缘 开始算，不是 content box，也不是 border 外侧。这意味着：如果参考父元素有 padding: 16px，那么 top: 0; left: 0 的子元素会离父容器内容区顶部和左侧各空出 16px。
立即学习“前端免费学习笔记（深入）”；
- 想让子元素视觉上“顶到”父容器的 border 内侧？别用
top: -16px补偿——破坏可维护性，也容易和transform混用出错 - 更稳妥的做法：把 padding 搬到子元素上，或用
box-sizing: border-box配合调整尺寸 -
transform: translate()是另一套坐标系，不影响定位参考点；混用时注意：先按top/left定位，再按transform偏移
overflow: hidden 和 z-index 在嵌套定位中的连锁反应
一旦某层祖先设了 overflow: hidden，所有超出它的 absolute 子元素都会被裁剪——哪怕 z-index 很高也没用。这不是 bug，是规范行为。
- 下拉菜单、Tooltip、日期选择器等悬浮类组件，若父容器设了
overflow: hidden，常出现“只显示一半” - 解决思路优先级：① 移除该层
overflow: hidden；② 把悬浮内容用portal渲染到body下；③ 用 JS 动态计算并调整top/left避开边界 -
z-index只在同一个堆叠上下文中生效；父容器若新建了堆叠上下文（如设了z-index且position != static），其内部所有子元素的层级都受限于该上下文
真正麻烦的不是写几行 position: relative，而是嵌套结构里谁悄悄建了新定位上下文、谁又无意中触发了 overflow 裁剪、还有哪些第三方样式在暗处改写了 position 值——这些地方不查 Computed 样式，光看 HTML 和 CSS 文件根本发现不了。
