overflow:hidden对absolute子元素失效，根本原因是父容器未设position:relative创建定位上下文；必须同时满足position:relative和overflow:hidden作用于同一元素，且需防范高度塌陷、transform干扰及z-index误用。
不是父级“故意”隐藏，而是浏览器按规范执行裁剪——overflow: hidden只对「既是定位祖先、又设置了非-visible overflow」的容器生效；如果父级是position: static（默认值），它根本不算定位祖先，裁剪自然不作用于它。
为什么加了overflow: hidden却没用或反而“消失”
常见现象是：元素明明写了top: -20px或right: -30px，却完全看不见。这不是渲染失败，是被裁掉了。
- 真正起裁剪作用的，往往不是直接父级，而是往上找到的第一个
position: relative/absolute/fixed/sticky祖先——比如.modal-wrapper或.card外层容器 - 用 DevTools 选中该 absolute 元素，看 Computed →
Containing Block，就能确认它到底相对谁定位 - 如果那个包含块恰好有
overflow: hidden且高度固定（如h-64），超出部分就会被切掉，z-index再高也没用 - Flex/Grid 容器即使没写
position，也常因其他样式（如transform）意外创建包含块，导致裁剪生效
position: relative必须和overflow: hidden写在同一元素上
这是最常漏掉的一环。很多人只写.parent { overflow: hidden; }，但没加position: relative，结果子元素还是往 body 找定位参考。
-
position: relative本身不改变布局，只创建包含块，可以放心加 - Tailwind 中要显式组合：
relative overflow-hidden，缺一不可 - 如果父容器是
display: flex或grid，仍需额外加relative——它们不自动提供定位上下文 - 别依赖
h-full或flex-1来撑高父容器，它们在子元素全为absolute时会塌陷为 0 高度，overflow: hidden就失去裁剪对象
想让下拉框、Tooltip“破框而出”，别调z-index
z-index只管层叠顺序，不管裁剪边界。哪怕设成9999，只要还在被overflow: hidden的祖先内，像素就被切掉了。
- 真正有效的做法是把 DOM 移出裁剪容器：挂到
body下，用 JS 动态计算top/left（React 用createPortal，Vue 用Teleport） - 纯 CSS 场景可试
clip-path: inset(0)替代overflow: hidden——它视觉裁剪但不建立裁剪上下文，absolute 元素可自由溢出（Safari 16.4+、Chrome 107+、Firefox 111+ 支持） -
overflow: clip语义更准，不触发滚动机制，也不裁剪 absolute 子项，但目前仅 Chrome 119+、Firefox 111+ 支持，Safari 尚未跟进 - 慎用
transform: translateZ(0)强行“修复”——它可能意外让父级变成新包含块，反而加剧裁剪
最容易被忽略的点，是以为“加了overflow: hidden就万事大吉”，却没检查它是否真的作用在那个“定位参考祖先”上。裁剪不是开关，是包含块 + overflow 的双重绑定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
