根本原因不是z-index数值小，而是其未生效：dropdown-menu自身position为static、父容器创建层叠上下文（如position: relative+z-index或overflow:hidden）、缺乏已定位祖先锚点导致定位失效。
为什么设置了 z-index 还是被盖住
不是 z-index 失效，而是它根本没机会生效。常见原因有三个：
• .dropdown-menu 自身 position 是 static（默认值），z-index 对它完全无效
• 它的父容器（比如 .navbar 或 .header）设置了 position: relative 且 z-index: 10，这就创建了一个独立的层叠上下文——子元素的 z-index: 9999 只在这个“盒子”里起作用，出不去
• 父容器同时设了 overflow: hidden（哪怕只是为防内容溢出），这会强制创建层叠上下文并裁剪超出区域，下拉菜单直接被砍掉下半截
overflow: hidden 是最隐蔽的遮挡元凶
很多开发者给导航栏加 overflow: hidden 是为了“让布局干净”，结果却封死了下拉菜单的上升通道。只要父容器满足：
• position 不是 static（如 relative）
• overflow 是 hidden、auto 或 scroll
它就成为一个层叠上下文边界，.dropdown-menu 再高也翻不出去。
替代方案：
• 用 padding 或 min-height 控制高度，而不是靠 overflow: hidden 裁剪
• 把 .dropdown-menu 移出该容器，挂到 下（需 JS 配合定位）
• 如果必须保留 overflow，改用 overflow: auto：无溢出时不滚动，也不裁剪绝对定位子元素
父容器没加 position: relative 导致菜单“飞走”
下拉菜单通常用 position: absolute，但它需要一个“锚点”——最近的已定位祖先。如果触发项（如 <li class="dropdown">）没设 position: relative，它就会往上一直找，最后落到 上，位置错乱或被其他块级元素视觉覆盖。
实操要点：
• 找到触发下拉的元素（通常是 .dropdown 或 .nav-item）
• 给它加 position: relative —— 不需要 top/left，仅此一项即可建立定位上下文
• 别顺手加 z-index: 0：这会创建新层叠上下文，把子菜单锁死在内部
• 如果该父级本身是浮动的（float: left），保留浮动 + 加 position: relative 即可，不用清除浮动来“救”定位
Elementor 或 Bootstrap 里嵌套场景的特殊处理
在 Elementor 中，首节 .elementor-section 常因 transform、opacity 或 <code>background-attachment: fixed 隐式创建层叠上下文，导致菜单被压在下面。Bootstrap 的手风琴（.accordion-item）默认是 position: static，所有项堆叠顺序一样，后渲染的项会盖住前面的下拉菜单。
对应解法：
• Elementor：给导航父容器（如 .elementor-header 或 .elementor-nav-menu）加 position: relative 和足够高的 z-index（比如 9999）
• Bootstrap 手风琴：给每个 .accordion-item 加 position: relative，再用 :nth-child() 或 :first-child 设递减的 z-index（如第一个 z-index: 10，第二个 z-index: 9）
• 所有修复都应限定作用域（如加前缀 .my-accordion .accordion-item），避免全局污染
真正卡住人的，从来不是 z-index 数值够不够大，而是它有没有被父级层叠上下文截断、有没有被 overflow 裁掉、有没有找到正确的定位锚点。这三个条件缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
