绝对定位元素的 overflow: hidden 必须作用于其最近已定位祖先（如 position: relative），否则无效；父容器高度塌陷或存在 transform 时也会导致裁剪失效，需通过设高、flex/grid 布局或 portal 等方式解决。
父容器没设 position: relative，overflow: hidden 就是摆设
绝对定位元素只认「最近的已定位祖先」，默认 position: static 的父容器根本不算数。它会一路往上找，甚至落到 body 上。你在视觉父级上加 overflow: hidden，等于贴错胶布——裁剪对象压根不是它。
必须同时满足两个条件才生效：
-
position: relative（或其他非static值）建立包含块（containing block） -
overflow: hidden（或auto/scroll且内容溢出时）作用于同一层
用 DevTools 看选中元素的 Computed → Containing block，一眼确认它到底相对谁定位。
transform 会让 overflow: hidden 失效
给 position: absolute 子元素加 transform: translateY(-50%) 或 rotate()，它会创建新层叠上下文和新的包含块。结果就是：父容器的 overflow: hidden 在 Safari 和旧版 Firefox 中基本失效。
可行替代方案：
- 改用
top/left+calc()或负margin实现居中 - 若必须用
transform（比如动画），就把overflow: hidden移到该子元素的**直接父容器**，并确保那个父容器有position: relative - Chrome 120+ 有一定支持增强，但别当作通用解法
父容器高度塌陷，裁剪对象本身不存在
当父容器内部只有 position: absolute 子元素时，它高度会坍缩为 0。overflow: hidden 还在，但“容器”几乎不可见，自然裁不着东西——你看到的不是溢出，而是整个父容器在页面上消失了。
解决办法取决于场景：
- 给父容器设明确高度（如
height: 200px）或最小高度（min-height） - 改用
display: flex或display: grid布局，它们能自动撑起父容器高度 - 如果内容本就靠绝对定位撑开，考虑是否真需要这个父容器；有时直接挂到
body下更干净
想让 Tooltip、下拉菜单“破框而出”，别硬调 z-index
z-index 控制层叠顺序，不解除裁剪。哪怕子元素 z-index: 9999，只要它还在被 overflow: hidden 的祖先内，超出部分照样被切掉。
真正有效的做法是把元素移出裁剪容器：
- 挂到
body下，用 JS 动态计算top/left - 现代框架可用
Portal（React）或Teleport（Vue） - 纯 CSS 场景可尝试
clip-path，但注意 Safari 对round()支持不全
最容易被忽略的点，是以为“加了 overflow: hidden 就万事大吉”，却没检查它是否真的作用在那个“定位参考祖先”上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
