绝对定位元素的裁剪需父容器同时满足position: relative（或非static）和overflow: hidden；flex/grid容器即使static也可作为包含块，但需overflow非visible；transform会破坏裁剪，z-index无效，父容器塌陷时需设高度或改用flex/grid布局。
父容器没设 position: relative，overflow: hidden 就是摆设
绝对定位元素的参考点是「最近的已定位祖先」，不是视觉上的父级。如果父容器仍是 position: static（默认值），浏览器会一路往上找，可能落到 body 上。此时你在它“看起来像父级”的容器上加 overflow: hidden，裁剪根本不会作用于该子元素。
必须同时满足两个条件：
-
position: relative（或其他非static值）建立包含块 -
overflow: hidden作用于同一个元素
常见错误写法：.parent { overflow: hidden; } → 正确写法是 .parent { position: relative; overflow: hidden; }。position: relative 本身不改变布局，只创建定位上下文，可以放心加。
transform 会让 overflow: hidden 失效
给绝对定位元素加 transform: translateY(-50%)、scale(0.9) 或 rotate()，会创建新的层叠上下文和包含块，导致父容器的 overflow: hidden 大概率失效——尤其在 Safari 和旧版 Firefox 中几乎必然发生。
实操建议：
- 优先用
top/left+calc()或负margin实现位移 - 若必须用
transform（比如动画），就把overflow: hidden移到该元素的**直接父容器**，并确保那个父容器有position: relative - 别依赖
clip-path替代：它本质仍是裁剪，不是“防越界”，且clip-path: round()在 Safari 支持不全
Flex/Grid 容器也会成为包含块，哪怕没设 position
即使父级是 position: static，若它是 display: flex 或 display: grid，且自身有 overflow: hidden 或 auto，依然会裁剪子元素——因为规范明确指出：具有非 visible overflow 的 flex/grid 容器，会为绝对定位子元素提供包含块。
检查方式：
- 看父级是否同时满足：是 flex/grid 容器 +
overflow不是visible - 修复方式：要么设
overflow: visible，要么把绝对定位元素移出该容器（例如用 Portal 或 DOM 搬运）
不要指望提高子元素的 z-index 来“逃出”裁剪——裁剪发生在绘制前，z-index 完全无效。
父容器高度塌陷，overflow: hidden 没东西可裁
当父容器内部只有 position: absolute 子元素时，它会坍缩为高度 0。这时候 overflow: hidden 还在，但容器本身几乎不可见，自然裁不出效果。
解决方向分两种：
- 给父容器设明确高度，如
min-height: 200px—— 别依赖h-full或flex-1，它们需要父级已有尺寸 - 改用
display: flex或display: grid布局，它们能自动撑起父容器高度；但注意：仍需显式加position: relative，否则包含块不成立
真正卡住越界的点，往往不在子元素本身，而在父容器是否建立了有效的包含块、是否被 transform 或 fixed 意外绕过、以及宽度控制是否覆盖了所有内容形态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
