父元素必须设 position: relative，因为 absolute 子元素默认向上查找首个非 static 祖先作为定位参照；若父为 static，则可能错位到 body 或 html。relative 不改变布局，仅声明自身为定位上下文。
父子层级不清，本质是子元素的定位参照系没明确。用 relative 给父容器设定位上下文，就能让内部的 absolute 子元素只相对于它定位，不“飘”到整个页面去。
为什么父元素必须设 relative？
因为 absolute 元素默认往上找第一个「已定位」（position 不是 static）的祖先元素作为参照。如果父元素是默认的 static，浏览器就会继续往上找，可能落到 body 或 html 上——这就造成层级错乱、位置失控。
- relative 本身不改变元素在文档流中的位置，只是“声明：我可当定位根”
- 它不触发偏移（left/top 等值为 0 时视觉无变化），纯属占位式声明
- 不需要写 left/top，只写
position: relative就够了
典型错误写法 vs 正确结构
错： 父元素没设 position，子元素直接 absolute → 参照系丢失
<div class="box">
<div class="tip">提示</div>
</div>
<p>.tip { position: absolute; top: -10px; right: 0; }
/<em> .box 没设 position → .tip 实际相对 body 定位 </em>/
对： 父加 relative，子按需 absolute
立即学习“前端免费学习笔记（深入）”；
.box { position: relative; }
.tip { position: absolute; top: -10px; right: 0; }
/* .tip 现在严格相对于 .box 的左上角定位 */
配合 transform 时要注意什么？
如果父元素用了 transform（比如 scale、translate），即使没写 position，它也会**自动成为 containing block**，此时再加 relative 是冗余的；但若同时需要控制堆叠顺序（z-index），仍建议显式写 relative，避免兼容性差异。
- transform 触发新层叠上下文，可能影响 z-index 行为
- 为统一性和可读性，推荐“有绝对定位子元素 → 父必加 relative”这一习惯
- 不要依赖 transform 隐式创建定位上下文，尤其在需要精确控制层级时
检查和调试小技巧
遇到定位异常，快速确认三点：
- 目标父元素是否写了
position: relative（或 absolute/fixed） - 用浏览器开发者工具选中子元素，看 computed 中的 Containing Block 是谁
- 临时给父元素加个 1px 红色边框或背景色，确认它的实际尺寸和位置是否符合预期
