结论：父容器的 overflow: hidden 与非 static position 共同使其成为绝对定位元素的包含块和裁剪边界，导致截断；解决需移出dom、改父级position、换裁剪方式或调整滚动逻辑。
绝对定位元素被父容器 overflow: hidden 截断了怎么办
直接说结论：不是子元素的问题，是父容器的 overflow 和 position 共同作用的结果。只要父容器设置了 overflow: hidden（或 auto、scroll），且自身 position 不是 static，它就会成为绝对定位元素的「包含块」和「裁剪边界」——哪怕子元素 position: absolute 且 top/left 超出范围，也会被裁掉。
为什么 overflow: hidden 会截断 position: absolute 元素
关键在「包含块（containing block）」的判定规则：当父容器 position 是 relative、absolute、fixed 或 sticky 时，它就成为子元素绝对定位的参照容器；同时，如果该父容器还设置了 overflow: hidden，浏览器就会以它的内边框（border box）为界裁剪所有溢出内容——包括其内部的绝对定位后代。
-
position: static的父容器不会成为包含块，此时绝对定位元素会往上找最近的非static祖先，截断行为可能发生在更上层 -
overflow: visible是唯一不触发裁剪的值，但无法滚动，也不解决“需要隐藏溢出 + 又要显示绝对定位下拉”的矛盾 - Flex 或 Grid 容器即使没设
position，也可能因隐式创建包含块而意外触发裁剪
绕过截断的几种实操方案（按推荐顺序）
没有银弹，选哪种取决于你控制的是哪一层、是否允许 DOM 调整、以及是否要保持滚动能力：
- 把绝对定位元素移出有
overflow: hidden的父容器，挂到body下（用ReactDOM.createPortal或手动appendChild），再用 JS 动态计算位置 - 将父容器的
position改回static（前提是它没依赖relative做其他布局），让绝对定位元素去找更外层的包含块 - 不用
overflow: hidden，改用clip-path或mask裁剪视觉，它们不影响绝对定位的渲染边界（但兼容性差，clip-path在 Safari 对 transform 元素支持不稳定） - 给父容器加
overflow: visible，靠外层容器接管滚动和裁剪逻辑（常见于下拉菜单 + 可滚动卡片列表的嵌套场景）
容易被忽略的坑：z-index 和 transform 的副作用
z-index 本身不导致截断，但它依赖层叠上下文（stacking context）。一旦父容器因 transform、opacity 、<code>will-change 等创建了新层叠上下文，又恰好带 overflow: hidden，那它就成了双重枷锁——既裁剪又限制层级渲染范围。
- 哪怕只是加了
transform: translateZ(0)，也会让父容器变成包含块 + 层叠上下文，加剧截断 -
z-index在无定位的元素上无效；设了z-index却没配position，等于没写 - 调试时可用浏览器开发者工具的「Layout Shift Regions」或勾选「Paint flashing」看实际裁剪区域
真正麻烦的从来不是怎么让下拉框出来，而是它出来之后，要不要响应父容器的滚动、要不要随视口滚动、要不要躲开屏幕边缘——这些决定了你得用 JS 补位还是换结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
