子菜单飘到页面左上角是因为position: absolute的定位基准是最近已定位祖先元素，若父级未设relative等非static值，则回溯至body定位；必须为每级可展开容器显式设position: relative，并避免overflow: hidden裁剪及transform干扰定位上下文。
为什么子菜单总飘到页面左上角？
因为 position: absolute 的定位基准不是父元素，而是最近一个 position 值为 relative、absolute、fixed 或 sticky 的祖先元素。如果所有上级都是默认的 static，它就直接相对于 body 定位——结果就是贴着视口左上角不动。
常见错误是只给最外层 .sidebar 或 .nav-list 加 position: relative，却漏掉中间某一级可展开的 li.menu-item。只要漏设一级，下级 .submenu 就会“断连”，向上跳一层找定位上下文，位置立刻失控。
- 必须给每一级「能展开子菜单」的容器显式加
position: relative（通常是带.submenu的li或div） - 别在
body或全局 wrapper 上乱加position: relative——它会变成整个菜单的统一参考点，导致所有子菜单挤在一起 - 如果父容器本身是
flex或grid，加position: relative不影响布局流，放心用
二级、三级、四级怎么各自精确定位不打架？
靠「逐级建立坐标系」：每级 relative 父容器定义自己的局部原点，下级 absolute 全部基于它计算偏移。但要注意层级策略——不是所有级都用 absolute。
- 第一级子菜单（二级）用
position: absolute+top: 100%或left: 100%，紧贴父项边界展开 - 第二级及更深（三级起）建议改用
position: relative+margin-left（或margin-top），而不是继续套absolute - 原因：多层
absolute叠加易触发独立层叠上下文（比如某级加了transform），导致 z-index 失效；而relative定位随父自然位移，响应式更稳 - 若坚持全用
absolute，务必确认每一级父容器都有position: relative，且没被overflow: hidden裁剪
鼠标移过去菜单闪退，怎么补上那条“缝隙”？
这不是 CSS 写错了，是 HTML 结构或盒模型留出了物理空隙，让鼠标经过时短暂脱离 :hover 区域，触发收起。典型表现是：从一级菜单项移到二级菜单途中，菜单突然消失。
- 检查一级
li和其内部ul.submenu之间是否有换行符、空格或 margin 产生的间隙 - 最简解法：
ul.submenu { margin-top: -1px; }或给父li加padding-bottom: 1px - 更可靠结构：确保
ul.submenu是li的直接子元素，并用top: 100%让它紧贴父项底边，不依赖 margin 对齐 - 移动端别依赖
:hover——iOS Safari 对嵌套 hover 支持极差，必须用 JS 切换is-open类配合.is-open > ul
侧边栏里 overflow: hidden 为什么会让菜单“凭空消失”？
因为 overflow: hidden（或 auto、scroll）会裁剪所有溢出内容，包括 position: absolute 的子菜单。它发生在布局阶段，不是 z-index 能解决的。
- 常见陷阱：侧边栏父容器（比如
.layout-sidebar）设了overflow: hidden，或者外层用了flex且父 flex 容器也设了overflow - 必须显式设
.sidebar { overflow: visible; }，并逐级检查其所有上级是否意外截断 - 别用
z-index补救——裁剪优先级高于层叠，再高的 z-index 也盖不住被切掉的部分 - 如果侧边栏本身需要滚动，把
overflow-y: auto放在内部内容区（如.sidebar-content），而非整个.sidebar
真正难的不是算对 left: 100%，而是确保每一级容器都“知道自己该相对于谁”，且没有哪个上级悄悄用 overflow 或 transform 把坐标系偷偷关掉了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
