absolute元素的坐标原点只认最近已定位祖先，即向上查找第一个position为relative/absolute/fixed/sticky的祖先，以其padding box左上角为原点；父级未设position: relative会导致定位链断裂，子元素锚定到更上级甚至body。
absolute元素的坐标原点只认「最近已定位祖先」
它不看DOM层级深浅，也不管视觉上离得多近，只往上找第一个position值为relative、absolute、fixed或sticky的祖先元素——找到就停，以此元素的padding box左上角为原点计算top/left。
常见错误现象：top: 20px结果离页面顶部20px，而不是父容器顶部20px。原因往往是父级li没设position: relative，浏览器继续往上查，最终落到body或html上。
- 父元素写
display: flex或float但没加position: relative→ 不构成定位上下文 - 父元素显式写了
position: static→ 等同于没设，照样跳过 - 中间某级
div被JS动态移除或重写样式，漏掉position: relative→ 定位链断裂，子菜单瞬间飘走
relative父容器本身不移动原点，但必须存在
position: relative的作用不是“把父元素挪到哪儿”，而是告诉浏览器：“从我开始，下面所有absolute都以我为锚。”它自己仍留在文档流中，尺寸由内容或显式宽高决定。
容易被忽略的是：如果父容器内部全是absolute子项，它大概率高度塌陷（变成height: 0），导致子菜单看似悬空——其实只是锚点“看不见”了。
- 用
min-height或padding撑开父容器比依赖内容更可控 - 父容器是
flex或grid时，加position: relative不影响布局逻辑，放心用 - 别在
body或全局wrapper上乱加position: relative——它会变成所有子菜单的统一参考点，位置全挤在一起
多级菜单里，每一级都要独立提供定位上下文
二级菜单要相对一级li展开，三级菜单要相对二级li展开，不能指望最外层nav一劳永逸。漏掉任何一级position: relative，下级absolute就会“断连”，向上跳级找基准，位置立刻失控。
例如三级菜单用left: 100%向右弹出，前提是它的直接父级li必须有position: relative且宽度不为0；否则left: 100%按0计算，菜单直接贴左边缘。
- 每级可展开容器（通常是
li.menu-item）都需显式加position: relative -
ul.submenu默认有padding-left，必须重置为0，否则干扰left: 0对齐 - 用
top: 100%比写死像素值更稳——它基于父容器内容区底边，字体缩放、行高变化都不影响贴边
transform和overflow会悄悄破坏定位链
transform虽不改变position值，但会触发新的包含块，导致其子absolute元素突然换锚点；overflow: hidden则可能把子菜单裁掉，看起来像“消失”而非“错位”。
这两者都不是直接改position，却常被忽略。调试时若发现菜单位置莫名偏移或截断，先检查父级是否意外加了transform或overflow: hidden。
- 父容器加
transform: translateX(0)也会创建新定位上下文 -
overflow: hidden不是bug，是可控裁剪——但得确认你真需要这个效果 - 避免对同一父容器同时设
position: relative和transform，除非你清楚后果
position: relative，整条链就断；多一个不该有的，可能让其他布局逻辑失效。真正关键的不是嵌套几层，而是每一级“谁负责提供定位上下文”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
