relative父元素通过设置position: relative（即使无top/left）成为最近非static祖先，从而作为absolute子元素的定位上下文，以其padding box左上角为原点。
relative 父元素如何成为 absolute 的定位上下文
因为 CSS 规范明确定义：position: absolute 元素的包含块（containing block）是**最近的非 static 定位祖先**。而 position: relative 是唯一既满足“非 static”条件、又不脱离文档流、也不改变布局的轻量级选择。
只要父元素显式写了 position: relative（哪怕没写 top/left），它就立刻成为“已定位祖先”，子元素的 top、left 就不再算页面左上角，而是以它自己的 padding box 左上角为原点。
常见误操作：
- 只写
top: 10px却漏掉position: relative→ 父仍是static，不起作用 - 用
transform: translateY(10px)替代top→ 它会隐式创建新 containing block，反而干扰预期定位
为什么没加 relative 时 absolute 会“飞走”
当父元素没设任何 position（即保持默认 static），absolute 子元素会逐层向上查找，直到遇到 html 或 body —— 这两个元素在多数浏览器中默认就是定位上下文，于是子元素就以整个视口为参考，看起来像“飘到右上角”或“盖住导航栏”。
立即学习“前端免费学习笔记（深入）”；
调试时可直接打开开发者工具，在「Computed」面板里看该元素的 offsetParent 是谁 —— 那才是它真正参照的对象。
典型翻车场景：
-
.dropdown-menu { position: absolute; top: 100%; left: 0; }，但.dropdown没加position: relative - 网格项（
display: grid）内部直接放absolute子元素 → 网格项默认static，子元素会跳到整个grid容器边界
relative 本身不控制尺寸，但它是 overflow 生效的前提
overflow: hidden 对 absolute 子元素无效，除非父元素同时满足两个条件：一是 position: relative（建立包含块），二是有明确的宽高或内容撑开。
否则即使加了 overflow: hidden，子元素依然可能溢出不可见，或者被裁掉一部分。
关键点：
- 仅
overflow: hidden不加position: relative→ 完全不裁剪 - 加了
position: relative但父容器无宽高（比如空 div 或仅含 inline 元素）→absolute子元素定位失准，甚至“消失” - 父元素有
padding：子元素top: 0; left: 0是贴 padding 内边缘，不是 border 边缘
z-index 和层叠上下文容易被连带影响
position: relative 元素设了 z-index（非 auto），就会创建新的层叠上下文；其内部所有 absolute 子元素的 z-index 都只在这个上下文内比较。
这意味着：即使子菜单设置了 z-index: 9999，如果它的父级 relative 容器的 z-index 是 1，而旁边有个 z-index: 2 的兄弟元素，那整个子菜单都会被压在下面。
更隐蔽的问题：
- 父元素虽写了
position: relative，但外层祖先用了opacity: 0.99或will-change: transform→ 也会创建层叠上下文，把子菜单“框死”在局部层级里 - IE6/7 中
z-index: auto的relative父元素仍会创建层叠上下文（不符合现代规范，但老项目可能踩坑）
最常被忽略的一点：relative 不是“自动生效”的开关，它需要和 DOM 结构、盒模型、层叠规则一起被验证。加了不一定管用，没加一定不管用 —— 关键是确认 computed 样式里的 containing block 是否如你所愿。
