overflow:hidden能裁剪position:absolute弹出菜单，是因为父容器同时满足position非static且overflow非visible时，会成为子元素的包含块和裁剪边界，使弹出菜单渲染受限于其border box，z-index失效于新层叠上下文。
overflow:hidden 为什么能裁剪 position: absolute 的弹出菜单
不是它“故意裁剪”，而是 CSS 规范强制它这么做：只要父容器同时满足 position 不是 static 且 overflow 不是 visible，它就自动成为子元素的「包含块」和「裁剪边界」。
此时弹出菜单（比如 .dropdown-menu）即使写了 position: absolute 和 z-index: 9999，渲染区域仍被限制在父容器的 border box 内——超出部分直接被切掉，不进文档流、不响应鼠标事件、也不滚动。
-
overflow: hidden+position: relative是最常见组合，也是最隐蔽的截断源头 -
overflow: auto或overflow: scroll同样会触发裁剪，不只是hidden - 哪怕父容器高度足够，只要弹出菜单的
top或bottom计算后超出其边界，就会被裁
z-index 再高也没用？原因在层叠上下文
z-index 不是万能层级开关，它只在同一个层叠上下文（stacking context）内有效。而 overflow: hidden 配合非 static position，会创建一个独立的层叠上下文。
这意味着弹出菜单的 z-index: 9999 只在父容器内部比兄弟元素高，但无法突破到外层，和其他兄弟容器（比如隔壁的 .header 或 .map-container）竞争层级。
立即学习“前端免费学习笔记（深入）”；
- 父容器若还带
transform、opacity: 0.99或will-change，会进一步强化这个层叠上下文 -
z-index: -1这类负值会让弹出菜单直接沉到父容器层叠上下文的最底层 -
z-index: auto（等价于0）不会创建新层叠上下文，但也不提供层级优势
怎么快速确认是不是 overflow:hidden 在作怪
打开浏览器开发者工具，逐级向上检查包含弹出菜单的祖先元素，重点看是否同时具备：
- 计算后的
overflow值为hidden、auto或scroll - 计算后的
position值为relative、absolute、fixed或sticky - 该元素在 DOM 树中恰好包裹着弹出菜单或其触发节点（如
button）
临时禁用该祖先元素的 overflow 样式，如果弹出菜单立刻完整显示，基本可以锁定问题。
注意：某些 CSS 框架（如 Bootstrap 5 的 .navbar）默认加了 overflow: hidden，需针对性覆盖，而不是全局删。
真正有效的绕过方式有哪些
别只盯着删 overflow: hidden——很多时候它是为圆角、背景裁剪或清除浮动存在的。更稳妥的做法是把弹出菜单从这个裁剪容器里“移出去”。
- 用 JavaScript 把
.dropdown-menuappendChild到document.body，再用getBoundingClientRect()动态定位 - Bootstrap 用户加
data-bs-container="body"强制挂载到body下（不要用data-bs-container=".some-class"） - React 中用
ReactDOM.createPortal，Vue 中用<teleport to="body"> - 给内容区单独包一层
<div class="content">，把overflow: hidden移到该内层，让弹出菜单脱离裁剪容器
真正容易被忽略的，是那些你没写的 overflow：第三方组件、CSS 框架、甚至 JS 动态注入的样式，比如 .modal 里的 transform: translateZ(0)，会双重锁定裁剪边界。
