加了z-index仍被盖住是因为浮动导致父容器高度塌陷、锚点丢失或意外创建层叠上下文；必须给触发元素设position:relative，禁用overflow:hidden，优先用flex布局替代float。

为什么加了 z-index 还是被盖住

因为 z-index 对 float 元素本身无效，且浮动父容器若没设 position: relative，子菜单的 position: absolute 会直接锚定到 ，位置飘移、层级错乱。更常见的是：父容器用了 float 导致高度塌陷，后续内容“上浮”视觉覆盖菜单——你以为是遮挡，其实是文档流断裂。

必须给触发项加 position: relative

这是所有修复的前提，不是可选项。

• 找到下拉触发元素，通常是 <li class="dropdown"> 或 <div class="nav-item"> <li>给它加 <code>position: relative，不加 top/left，也不加 z-index
• 如果这个元素本身是 float: left，保留 float，同时加 position: relative 即可
• 别在它的父容器（比如整个导航栏）上设 z-index: 0，这会意外创建层叠上下文，把子菜单锁死在里面

清除浮动但别用 overflow: hidden

overflow: hidden 是下拉菜单被“砍头”的头号元凶——它既不解决塌陷，又会裁剪 position: absolute 子元素。


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• 优先用伪元素清除：.navbar::after { content: ""; display: table; clear: both; }
• 如果必须用 overflow，选 overflow: auto，它在无溢出时不出现滚动条，且允许绝对定位子元素外溢
• 用开发者工具检查：是否在 .dropdown 的直接父级（比如 .dropdown-menu 外层 <ul></ul>）写了 overflow: hidden？删掉

现代项目建议直接弃用 float

浮动不是为交互菜单设计的，硬凑会持续引入塌陷、错位、响应式脆弱等问题。

• 把导航栏整体设为 display: flex，菜单项自动横向排列，无需 float
• 仍需给每个触发项（如 .nav-item）加 position: relative，否则子菜单找不到锚点
• Flex 不等于自动解决层级——z-index 生效依然依赖 position 和层叠上下文，该设的 relative 一个都不能少

最易被忽略的一点：很多问题表面是“遮挡”，实际是父容器塌陷后，下拉菜单的 position: absolute 锚点丢失，导致它飞到页面角落；此时调 z-index 毫无意义，先 fix 定位上下文再说。