z-index 失效主因是父容器创建层叠上下文或裁剪，尤其是 overflow: hidden 与非 static position 组合；解决需避免父级截断、合理分层并慎用 hover。
z-index 本身不能单独解决问题，关键在它是否生效、是否被父级层叠上下文截断，而 overflow 属性常在无意中创建新的层叠上下文或裁剪内容——这两者叠加，正是下拉菜单“明明设置了高 z-index 却还是被盖住”的核心原因。
为什么 z-index 设置了却没用
常见现象是：.dropdown-menu 写了 z-index: 9999，但依然被导航栏、h1 或地图容器挡住。这不是 z-index “失效”，而是它根本没机会起作用：
-
position值不是relative、absolute、fixed或sticky——z-index对static元素完全无效 - 父容器（比如
.navbar或.header）自身设置了position: relative且z-index: 10，这就创建了一个独立的层叠上下文；子元素的z-index: 9999只在这个父级内部有效，无法突破到外层 - 父容器设置了
overflow: hidden、overflow: auto或overflow: scroll，且同时满足position非 static —— 这会强制创建新的层叠上下文，效果等同于上面那条
overflow: hidden 是最隐蔽的遮挡元凶
很多开发者为“防止内容溢出”给导航栏或头部容器加了 overflow: hidden，却没意识到这会悄悄封死下拉菜单的上升通道：
- 只要父容器有
overflow: hidden+position: relative（哪怕z-index: auto），它就成为一个层叠上下文边界 -
.dropdown-menu即使position: absolute并设了z-index: 9999，也只能在父容器这个“盒子”里堆叠，无法盖过兄弟元素 - 更糟的是：如果父容器高度不够，
overflow: hidden还会直接裁掉下拉菜单的底部
解决方法不是删掉 overflow，而是换一种控制方式：
用 padding 或 min-height 替代裁剪，或把下拉菜单移出该容器（例如挂到 body 下）。
立即学习“前端免费学习笔记（深入）”；
z-index 的安全写法与层级配比
不要盲目堆数字，要建立清晰、可维护的层级体系：
- 基础 UI 层（如固定导航栏）：用
z-index: 100 - 下拉菜单、弹窗等浮层：统一用
z-index: 1000，并确保其父触发器（如.dropdown）只设position: relative，不设z-index - 模态框、全屏覆盖层：用
z-index: 2000起步 - 绝对避免给触发容器（如
.dropdown）设z-index: 0或负值——这等于主动把它变成层叠上下文的“天花板”
示例结构：
.dropdown { position: relative; } /* 不设 z-index */
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background: #fff;
border: 1px solid #ddd;
z-index: 1000; /* 有效，因父级无 z-index 截断 */
}移动端与 hover 交互的额外陷阱
在 iOS Safari 或部分安卓浏览器中，:hover 行为不稳定，且 overflow: hidden 容器在滚动时可能触发重绘异常，导致菜单闪退或错位：
- 不要依赖纯 CSS
:hover实现下拉，尤其当父容器有overflow时；真实项目建议用 JS 控制show/hide类名 - 若必须用 hover，请确保触发区域和菜单之间无缝隙（用
top: 100%+ 消除边框/内边距间隙），否则鼠标一移就断连 - 测试不同缩放比例下
overflow是否意外裁切菜单，特别是使用transform或scale的场景
真正卡住问题的，往往不是 z-index 数值不够大，而是某一层父容器默默加了一行 overflow: hidden，又顺手加了个 position: relative —— 这两个属性合体，比任何低 z-index 都管用。
