绝对定位元素的偏移量相对于最近已定位（relative/absolute/fixed/sticky）祖先计算，非body；父容器设position: relative即可建立定位上下文，无需偏移值。
相对定位元素作为绝对定位的父容器
绝对定位元素的 top/left 等偏移量，是相对于**最近的已定位（position 为 relative、absolute、fixed 或 sticky）祖先元素**计算的，不是相对于 body。所以若想让某个 position: absolute 元素“困在”某块区域内，必须确保它的直接或上层祖先中有一个设置了 position: relative（且不为 static）。
常见错误是只写 position: absolute，却忘了给父容器加 position: relative，结果元素直接相对于 viewport 定位，飘到页面任意角落。
- 父容器只需声明
position: relative，无需设置top/left等偏移，它本身仍占据文档流位置 - 如果父容器同时有
overflow: hidden，而子元素absolute超出其边界，会被裁剪——这是可控的“围栏”效果 - 避免对父容器设
position: absolute后再嵌套另一个absolute子元素，除非你明确需要脱离两层文档流
多层嵌套时的定位参考链判断
浏览器会从目标元素向上逐层查找第一个非 static 的祖先，这条路径决定定位基准。这个过程不看层级深度，只看“谁先被找到”。例如：
.outer { position: relative; }
.middle { position: static; } /* 被跳过 */
.inner { position: absolute; top: 10px; left: 20px; }
此时 .inner 的 top: 10px 是相对于 .outer 计算的，尽管中间隔着一个 static 的 .middle。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 第三方组件（如弹窗、下拉菜单）内部可能自带
position: relative，导致你的absolute子元素意外绑定到它身上，而不是你预期的父容器 - 使用 CSS 框架（如 Bootstrap）时，
.dropdown、.modal等类通常已设position: relative，需检查 computed styles 确认定位上下文 - Flex 或 Grid 容器即使没显式设
position，也不会成为定位参考；只有position != static才触发参考链中断
absolute 嵌套 relative 时的布局干扰
把 position: relative 元素放在 position: absolute 元素内部，不会改变后者的定位行为，但会影响内部子元素的定位参考——因为那个 relative 元素自身成了新参考点。
典型场景：气泡提示（tooltip）内部带箭头，箭头用 absolute 定位，而提示框主体是 absolute，箭头又需要相对于提示框定位：
.tooltip { position: absolute; }
.tooltip-arrow { position: relative; } /* 错！这里应保持 static 或设 absolute */
.tooltip-arrow::before { position: absolute; top: -6px; left: 10px; }
正确做法是让箭头伪元素直接相对于 .tooltip 定位，或者把 .tooltip-arrow 设为 position: absolute 并显式指定偏移。
-
relative元素在absolute内部，仅当它要作为更深层absolute子元素的参考容器时才有意义 - 多数情况下，嵌套中的
relative是冗余的，还会增加 layout shift 风险（因 relative 仍占空间） - 若需微调某子元素位置，优先用
transform: translate()，而非套一层relative+absolute
z-index 在多重定位嵌套中的作用范围
z-index 只在同一个层叠上下文（stacking context）内生效。而每个 position 非 static 且设了 z-index（或 opacity
这意味着：即使 A 和 B 都是 absolute，但如果 A 的父容器有 z-index: 1，B 的父容器有 z-index: 999，那么无论 A 自身 z-index 多高，它也永远在 B 下面。
- 调试时用浏览器 devtools 的 “Layers” 面板或勾选 “Show stacking order” 查看层叠上下文边界
- 不要试图靠堆砌
z-index: 999999突破父级限制；应统一提升父容器的层叠值 - 移动端 Safari 对
z-index的层叠上下文处理更敏感，尤其配合transform时，需额外验证
实际嵌套越深，定位参考和层叠上下文就越容易失控。最稳妥的方式是：控制定位层级尽量扁平，用 class 显式命名定位作用域（如 dropdown-menu、tooltip-content），并在每个作用域顶层设好 position: relative 和必要 z-index。