下拉菜单“突然消失”最常见原因是父容器设了overflow:hidden且position:relative，导致创建层叠上下文和裁剪边界；应将菜单挂到body下、用padding/min-height撑高容器或改overflow:auto。
父容器设了 overflow: hidden 怎么办
这是下拉菜单“突然消失”最常见原因：父容器（比如 .navbar 或 .header）加了 overflow: hidden，又恰好设置了 position: relative，结果创建了层叠上下文 + 裁剪边界，子菜单哪怕 position: absolute 且 z-index: 9999，也会被直接截断。
别删 overflow: hidden 就完事——它可能在防内容溢出或撑开布局。替代方案有：
- 把下拉菜单移出该容器，挂到
body下（如 Bootstrap 的data-container="body"） - 用
padding或min-height替代裁剪逻辑，让容器自然撑高 - 若必须保留滚动控制，改用
overflow: auto（无溢出时不裁剪，也不强制创建新层叠上下文）
position: relative 没加在直接父级上
下拉菜单的 position: absolute 默认找“最近的已定位祖先”。如果触发项是 <li class="dropdown">，但你只给 <nav></nav> 加了 position: relative，而没给 <li> 加，那菜单就会跳过它，往上找到 <nav></nav> 甚至 body，位置全乱。
实操要点：
- 定位锚点必须是**直接父容器**，即包裹
.dropdown-menu的那个元素（通常是<li>或<div class="dropdown">） <li>只加 <code>position: relative，不要额外设z-index（除非你明确要建新层叠上下文） - 如果该父级本身是
float或display: flex子项，仍需显式加position: relative，不能依赖布局模式自动提供上下文 - 对浮动父级用伪元素清除：
.dropdown::after { content: ""; display: table; clear: both; } - Flex/Grid 父容器不塌陷，但它的子项（如
<li>）仍需position: relative才能当锚点 - 避免用
overflow: hidden清除浮动——它会同时裁剪下拉菜单 - 用开发者工具逐级查看
.dropdown-menu的 computedposition和z-index，再往上点父级，看哪一层的transform或opacity值异常 - 如果父容器必须动效，优先用
translateY()替代top，避免意外创建层叠上下文 - 不要全局覆盖
.dropdown-menu { z-index: 9999; }，而是配合父级的层叠顺序一起调（例如.navbar { z-index: 1050; }，.dropdown-menu { z-index: 1060; }）
父容器塌陷导致菜单“悬空”或错位
浮动（float）或 Flex/Grid 容器未撑高时，父容器高度为 0，position: absolute 的菜单虽然定位计算正确，但视觉上会叠在后续内容上，看起来像被遮挡或飞走。
检查方式：打开开发者工具，看触发项的盒子是否“空心”（高度为 0）。修复方法：
z-index 明明很高却还是被盖住
z-index 不是全局排序器，它只在同一个层叠上下文里生效。父容器一旦触发新层叠上下文（比如加了 transform、opacity: 0.99、filter 或 will-change），里面所有子元素的 z-index 都被锁死在这个“盒子”里，再高也盖不过兄弟容器。
排查重点：
真正卡住下拉菜单的，往往不是定位属性写得不对，而是某一层父容器悄悄创建了层叠上下文或裁剪边界——这两者肉眼难见，但开发者工具的 computed 样式栏一眼就能揪出来。
