overflow-hidden对absolute子元素失效，根本原因是父容器未设position:relative创建定位上下文，导致裁剪无法作用于该子元素；必须同时满足position:relative和overflow:hidden作用于同一元素，且需防范高度塌陷、transform干扰及z-index误用。
父容器没设 position: relative，裁剪根本不起作用
绝对定位元素的定位参考是「最近的已定位祖先」，不是视觉上的直接父级。如果父容器仍是 position: static（默认值），那子元素会一路往上找，可能落到 body 上。此时你在它“看起来像父级”的容器上加 overflow: hidden，等于在错误对象上贴胶布。
必须同时满足两个条件，裁剪才生效：
-
position: relative（或其他非static值）建立包含块 -
overflow: hidden作用于同一个元素
常见误写：.parent { overflow: hidden; } → 正确写法是 .parent { position: relative; overflow: hidden; }。position: relative 本身不改变布局，只创建定位上下文，可以放心加。
父容器高度塌陷，overflow: hidden 没东西可裁
当父容器内部只有 position: absolute 子元素时，它会坍缩为高度 0。这时候 overflow: hidden 还在，但容器本身几乎不可见，自然裁不出效果。
解决方向分两种：
- 给父容器设明确高度，如
h-40、min-h-[200px]—— 别依赖h-full或flex-1，它们需要父级已有尺寸 - 改用
display: flex或display: grid布局，它们能自动撑起父容器高度；但注意：Flex/Grid 容器默认不创建定位上下文，仍需显式加position: relative
transform 创建新包含块，让裁剪失效
给绝对定位元素加 transform: translateY(-50%) 或 scale(0.9)，会创建新的层叠上下文和包含块，导致父容器的 overflow: hidden 失去裁剪效力——尤其在 Safari 和旧版 Firefox 中几乎必然失效。
实操建议：
- 优先用
top/left+calc()或负margin实现居中，避开transform - 若必须用
transform（比如动画），就把overflow: hidden移到该元素的**直接父容器**，并确保那个父容器有position: relative - Chrome 120+ 支持有所增强，但别当作通用解法
想让下拉框、Tooltip “破框而出”，z-index 不管用
z-index 控制层叠顺序，不解除裁剪。哪怕子元素 z-index: 9999，只要它还在被 overflow: hidden 的祖先内，超出部分就会被切掉。
真正有效的做法是把元素移出裁剪容器：
- 用 JS 把 DOM 节点移到
document.body下，再动态计算top/left - 现代框架可用
Portal（React）或Teleport（Vue）实现 DOM 提升 - 页面顶层预留一个
<div id="portal-root" class="fixed inset-0 pointer-events-none"></div>，统一挂载浮动类组件
最容易被忽略的一点，是以为“加了 overflow: hidden 就万事大吉”，却忘了检查它是否真的作用在那个“定位参考祖先”上。DevTools 里看一眼 Computed → Containing block，比调十次 z-index 更快定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
