overflow: hidden 会强制创建裁剪边界和层叠上下文，导致子元素即使 z-index 很高也会被截断；浮动父级塌陷会使绝对定位菜单错位；移动端同样受裁剪影响。
overflow: hidden 会强制创建裁剪边界
父容器设了 overflow: hidden，同时又不是 position: static（比如加了 position: relative），就会自动成为「包含块」和「裁剪边界」。此时子元素哪怕用了 position: absolute 和 z-index: 9999，只要渲染区域超出父容器的 border box，立刻被切掉——不滚动、不响应鼠标、也不进文档流。
常见误用场景：
- 导航栏
.navbar为防内容溢出加了overflow: hidden，结果下拉菜单被“砍头” -
overflow: auto或overflow: scroll同样触发裁剪，不只是hidden - 父容器高度不够，但开发者只调
z-index，没意识到根本问题是渲染被截断
position: relative + overflow 组合会创建新层叠上下文
z-index 不是全局开关，它只在同一个层叠上下文里起作用。而 position: relative 配合 overflow: hidden（或 auto/scroll）会悄悄新建一个层叠上下文——子菜单的 z-index: 9999 只能压过父容器内部的兄弟元素，但无法盖过隔壁的 .header 或 .map-container。
更隐蔽的问题：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 父容器还带
transform、opacity: 0.99或will-change，会进一步强化这个层叠上下文 -
z-index: -1让子元素直接沉到底层，连内部排序都输 -
z-index: auto等价于0，既不创建新上下文，也不提供层级优势
浮动导致父容器塌陷，间接引发定位错乱
如果触发下拉的父级用了 float: left，它会脱离文档流，导致父容器高度塌陷。这时 position: absolute 的下拉菜单找不到有效的已定位祖先，就往上一直找，最终可能相对于 body 定位——菜单飘到左上角、位置错乱、或被后续浮动块视觉覆盖。
修复关键点：
- 给触发项（如
<li class="dropdown">）加position: relative，不需偏移，只为建立定位上下文 - 若该父级本身是浮动的，保留
float的同时加position: relative即可 - 清除浮动要用安全方式：
.dropdown::after { content: ""; display: table; clear: both; }，别用overflow: hidden救塌陷——那会把菜单也裁了
移动端 hover 不可靠，但裁剪问题依然存在
虽然 :hover 在 iOS 上行为不稳定（首次点击触发，第二次才跳转），但这不影响裁剪逻辑。只要 DOM 结构里下拉菜单仍是 position: absolute 子元素，且挂在有 overflow: hidden 的父容器下，它照样被切——只是你可能在桌面调试时看到，移动端反而因为交互方式不同，掩盖了这个问题。
真正要检查的是：
- 是否在响应式断点中给某一层加了
overflow: hidden（比如小屏下.nav-mobile） - 是否用
transform包裹了导航区域（transform也会创建层叠上下文） - 是否把下拉菜单挂到了错误的父级下（比如整个
.header而不是单个.nav-item）
overflow: hidden ——这个祖先可能离它隔了两三级 DOM，但浏览器渲染时认的就是它。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
