overflow: hidden 裁剪绝对定位元素需父容器同时满足 position: relative（创建包含块）和 overflow: hidden；仅设 overflow: hidden 无效，flex/grid 不自动创建包含块，transform 会破坏裁剪，父容器塌陷或 z-index 均无法解决裁剪问题。
父容器没设 position: relative，overflow: hidden 就是摆设
绝对定位元素的裁剪行为只在它和父容器同时满足两个条件时才生效：父容器既是它的「包含块」，又设置了 overflow: hidden。而「包含块」必须由非 static 的 position 触发——position: relative 是最安全的选择，它不改变布局，只建立定位上下文。
常见错误写法：.parent { overflow: hidden; } → 子元素仍可能飘到页面任意位置，因为父容器仍是 position: static，浏览器会继续往上找包含块（甚至落到 body）。
- 必须补上
position: relative：.parent { position: relative; overflow: hidden; } - 如果父容器已用
display: flex或display: grid，它们不会自动创建包含块，仍需显式加position: relative - 检查开发者工具中该元素的
Containing block计算值，比反复调z-index更快定位问题
transform 会让 overflow: hidden 失效
给绝对定位子元素加 transform: translateY(-50%) 或 rotate() 后，它会创建新层叠上下文和新的包含块，导致父容器的 overflow: hidden 在 Safari 和旧版 Firefox 中基本失效。
- 优先改用
top/left+calc()或负margin实现居中，避开transform - 若必须用
transform（比如动画），就把overflow: hidden移到该子元素的**直接父容器**，并确保那个父容器有position: relative -
Chrome 120+对此有一定支持增强，但别当作通用解法
父容器高度塌陷，裁剪对象本身不存在
当父容器内部只有绝对定位子元素时，它高度会坍缩为 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）实现 DOM 提升 - 纯 CSS 解法可尝试
overflow: clip（Chrome 119+、Firefox 111+支持），语义更干净，且不隐式创建层叠上下文
最容易被忽略的点，是以为“加了 overflow: hidden 就万事大吉”，却忘了检查它是否真的作用在那个“定位参考祖先”上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
