子菜单position: absolute跑出父容器，因未设父级position: relative导致定位基准错误；z-index失效源于层叠上下文隔离；移动端需JS控制互斥展开；IE11兼容需避免flex与transform混用。
子菜单 position: absolute 为什么跑出父容器？
因为默认情况下，absolute 定位是相对于最近的「已定位祖先元素」（即 position 值为 relative、absolute、fixed 或 sticky），不是相对于直接父元素。如果父级没设 position: relative，它就可能往上找到 body 或某个布局容器，导致子菜单飘走。
实操建议：
- 给每一级菜单的「直接父
<li>或<div>」加position: relative - 不要只给最外层
<ul>加，多级嵌套时每层触发定位的容器都得单独设 - 避免在父级上误加
overflow: hidden—— 它会裁剪超出的absolute子元素，让子菜单“消失”
二级菜单显示后遮不住下级三级菜单？
这是 z-index 层叠上下文没理清：只要一个元素创建了新的层叠上下文（比如设置了 opacity < 1、transform、filter 或 will-change），它的子元素的 z-index 就只能在这个新上下文内比较，无法盖过同级其他上下文里的元素。
常见错误现象：z-index: 999 的二级菜单，盖不住隔壁 z-index: 1 的三级菜单。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 确保所有菜单层级都在同一个层叠上下文中 —— 最简单就是全都不加触发新上下文的属性
- 如果必须用
transform做动画，改用translate替代top/left移动，它不强制创建新上下文 -
z-index只对position非static元素生效，检查是否漏写了position: relative或类似声明
移动端点击展开后，再点别的菜单不收起上一个？
CSS 本身没有“互斥展开”逻辑，纯靠 :hover 或 :focus-within 实现的菜单，在移动端容易失效或状态残留 —— 因为触摸没有持续的 hover 状态，且 :focus-within 在某些 iOS 版本中对非表单元素支持不稳定。
使用场景：需要手风琴式单开、或多开但点击新项时自动关闭旧项。
实操建议：
- 放弃纯 CSS 方案，用 JS 控制类名切换（如
is-open），配合transition做动画 - 监听
click事件时，先遍历移除所有同级的is-open，再给当前加 —— 别依赖blur或touchend做收起，不可靠 - 如果坚持用 CSS，可用
input[type="checkbox"] + label + ul结构模拟开关，但要注意 Safari 对隐藏 checkbox 的 focus 行为有差异
IE11 下子菜单定位偏移或错位
IE11 对 transform 和 flex 容器内的 absolute 定位处理异常：当父容器用了 display: flex 但没显式设 position: relative，子级 absolute 可能以 flex 容器的 padding 边缘为参考，而非 content box。
性能影响：IE11 中频繁触发 top/left 动画比 transform: translateY() 更卡，但后者又可能破坏定位基准。
实操建议：
- 在 IE11 兼容场景下，宁可用
top/left配合position: relative，避开transform对定位上下文的干扰 - 用
@supports (display: flex)包裹现代写法，IE11 不支持该 at-rule，自然回落 - 避免在 flex 容器上同时用
align-items: center和子元素absolute垂直居中 —— IE11 计算逻辑混乱，偏移量难预测
多级菜单真正的麻烦不在定位本身，而在于「哪一层该负责创建定位上下文」「哪一层该管理 z-index 范围」「以及什么时候该交给 JS 而不是硬撑 CSS」—— 这些边界稍不注意，就会在某个浏览器、某种交互路径下突然崩掉。
