根本原因不是z-index太低，而是浮动导致父容器塌陷、定位上下文缺失及overflow:hidden裁剪三者叠加；需为触发元素加position:relative建立定位根，并避免overflow:hidden干扰层叠。
根本原因不是 z-index 太低，而是浮动导致父容器塌陷 + 定位上下文缺失 + overflow: hidden 裁剪三者叠加。单独调高 z-index 几乎无效。
父容器高度塌陷导致定位“认错爹”
浮动元素（如 float: left）脱离文档流，使父容器无法撑开高度——这就是“塌陷”。此时下拉菜单若用 position: absolute，会向上查找最近的“已定位祖先”，但塌陷的父级是 position: static，不被识别，结果菜单就锚定到 <body> 或更外层容器上，位置飘移、层级错乱。
常见表现：
- 菜单展开后突然出现在页面左上角或右上角
- 鼠标悬停时菜单闪一下就消失（尤其在旧版 IE）
- 开发者工具里 DOM 位置正确，但高亮框明显偏移
触发项没加 position: relative
这是最常被跳过的一步：position: absolute 的子菜单必须有一个“定位根”，否则它不会以你期望的导航项为基准展开。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 找到触发下拉的元素，通常是
<li class="dropdown">或<div class="nav-item"> - 给它加
position: relative—— 不需要任何top/left偏移，仅此一项即可建立定位上下文 - 避免同时设
z-index: 0或负值，这会意外创建新层叠上下文，把菜单锁死在内部 - 该父级本身是浮动的？没关系，
float: left和position: relative可共存
overflow: hidden 在悄悄“砍头”
很多老项目为清除浮动或防背景溢出，在 header 或导航父容器上写了 overflow: hidden。但它会强制创建层叠上下文，并裁剪所有超出边界的绝对定位内容——哪怕菜单设置了 z-index: 9999，也只能在那个“盒子”里堆叠，无法盖过兄弟元素。
检查与替换方案：
- 打开浏览器开发者工具，选中导航最外层容器，看 computed 样式里是否有
overflow: hidden且position不是static - 优先删除该
overflow声明；如需清除浮动，改用伪元素：.nav::after { content: ""; display: table; clear: both; } - 若必须控制溢出，用
overflow: auto替代 —— 它在无溢出时不出现滚动条，且不会裁剪position: absolute子元素
菜单自身没背景色，造成“透底”假象
即使层级和定位都对了，如果下拉菜单的 <ul> 或 <div> 没设 background-color，文字会和下方内容混在一起，看起来像“被遮挡”，实则是透明穿透。
务必确认：
- 菜单容器有明确的
background-color（如#fff或rgba(255,255,255,0.98)） - 避免只依赖
opacity或filter实现半透明，它们会触发新层叠上下文，干扰z-index行为 - 如有阴影，用
box-shadow而非background模拟，更可控
真正卡住人的地方，往往不是某一个属性写错了，而是多个看似无关的布局决策（浮动、overflow、position、透明度）叠在一起，让问题变得不可见。调试时别只盯着 z-index，先用开发者工具逐层关掉 overflow 和浮动，再看定位根是否就位——顺序错了，后面全白调。
