下拉菜单被浮动元素遮挡，主因是浮动致父容器塌陷、定位上下文缺失或层叠上下文截断；须先加 position: relative 建立定位上下文，再合理设置 z-index 与背景色。
下拉菜单被浮动元素遮挡，90%的情况不是 z-index 设低了，而是浮动导致父容器高度塌陷、定位上下文缺失、或层叠上下文被意外截断。硬调 z-index 往往无效，必须先理清布局结构。
为什么浮动父容器会让下拉菜单“飞走”或被盖住
浮动元素（float: left 或 float: right）会脱离文档流，导致其父容器无法感知子元素高度——也就是“高度塌陷”。此时，如果下拉菜单用的是 position: absolute，它会向上查找最近的“已定位祖先”，但浮动父级不算（position: static），结果就落到 上，位置错乱；即使位置对了，父容器塌陷后可能被后续浮动块视觉覆盖，看起来像被遮挡。
常见现象包括：
- 下拉菜单展开后飘到页面右上角或左上角
- 菜单文字可见，但背景透明，底下内容“透上来”
- 鼠标悬停时菜单闪一下就消失（IE6/7 的 hasLayout 问题）
- 开发者工具里看到菜单 DOM 在正确位置，但高亮框明显偏移
给触发下拉的父级加 position: relative 是关键一步
这是让 position: absolute 子菜单“认爹”的前提。没有它，再高的 z-index 都没意义。
实操建议：
- 找到触发下拉的元素（通常是
<li class="dropdown">或<div class="nav-item">） <li>给它加 <code>position: relative—— 不需要top/left偏移，仅此一项即可建立定位上下文 - 避免同时设
z-index（比如z-index: 0），否则会创建新层叠上下文，把子菜单锁死在内部 - 若该父级本身是浮动的（如
float: left），保留浮动的同时加position: relative即可，无需清除浮动来“救”定位 - 优先用伪元素清除：
.dropdown::after { content: ""; display: table; clear: both; } - 若必须用
overflow，选overflow: auto而非hidden（auto在无溢出时不出现滚动条，且不裁剪绝对定位子元素） - 检查是否误在菜单父容器上加了
overflow: hidden—— 这是下拉被“砍头”的最常见原因 - 现代方案：把整个导航栏换成
display: flex，浮动自然消失，但记得仍要给触发项加position: relative - 目标元素必须有
position（relative、absolute、fixed或sticky），static下z-index完全被忽略 - 不能依赖父容器的
z-index值去“托起”子元素——除非父容器显式创建了层叠上下文（如带transform或opacity: 0.99），否则子元素的z-index只和同级兄弟比 - 若菜单和遮挡元素不在同一层叠上下文（比如一个在
transform容器内，一个在body下），它们的z-index数值根本不会比较——得统一提升到更高层级，比如给导航栏容器设z-index: 100，菜单设z-index: 101
清除浮动防止父容器塌陷，但别用 overflow: hidden 截断菜单
清除浮动是为了让父容器“撑开”，避免后续内容上浮覆盖菜单区域。但错误方式反而会把下拉部分直接裁掉。
安全做法：
z-index 生效的三个硬条件缺一不可
很多人设了 z-index: 9999 还是无效，是因为忽略了底层约束：
最容易被忽略的一点：下拉菜单容器本身没设背景色。即使 z-index 正确、定位正常，透明背景也会让底下内容“透上来”，看起来像被遮挡。加一行 background-color: #fff 或 background: white，问题常当场消失。
