当父容器设 overflow: hidden 且是子元素的定位参考父级（即包含块）时才会裁剪；relative/absolute/fixed/sticky 父元素可成为包含块，static 则不能；fixed 元素不受父级 overflow 影响；transform 非 none 也会创建裁剪容器。
当元素设置了 position（如 relative、absolute、fixed），同时其父容器设置了 overflow: hidden（或 auto、scroll），是否会被裁剪，取决于该父容器是否构成“定位上下文”和“裁剪边界”——关键看它是否是最近的定位祖先元素且同时满足有溢出裁剪行为。
overflow 裁剪生效的前提：必须是定位参考父级
只有当一个设置了 overflow: hidden 的容器，同时也是子元素的包含块（containing block）时，它的裁剪才对子元素的定位内容起作用。而这个“包含块”通常由以下条件触发：
- 父元素
position值为relative、absolute、fixed或sticky（即：它是定位祖先） - 子元素使用
position: absolute或fixed，其定位参考的就是这个父元素 - 此时，该父元素若设置
overflow: hidden，就会裁剪超出其边界的子元素内容
⚠️ 注意：如果父元素 position: static（默认值），即使设了 overflow: hidden，也不会成为 absolute 子元素的包含块，裁剪无效（子元素仍相对于最近定位祖先裁剪）。
常见易错场景：relative + overflow:hidden 不一定裁剪 absolute 子元素
很多人以为只要父元素写了 position: relative; overflow: hidden，里面的 absolute 元素就一定会被裁剪。其实不一定——关键看子元素有没有真正以它为定位参考：
立即学习“前端免费学习笔记（深入）”；
- ✅ 有效裁剪：
<div style="position:relative;overflow:hidden"><div style="position:absolute;top:-10px">…</div></div> - ❌ 无效裁剪：
<div style="overflow:hidden"><div style="position:absolute;top:-10px">…</div></div>（父无定位，不构成包含块） - ❌ 无效裁剪：
<div style="position:relative"><div style="position:absolute;top:-10px">…</div></div>（父无 overflow，不裁剪）
fixed 元素基本不受父级 overflow 影响
position: fixed 的元素始终以视口（viewport）为包含块，与 DOM 层级中的父容器无关。因此：
- 无论父元素是否设置
overflow: hidden，都无法裁剪fixed元素 - 唯一能限制
fixed元素显示范围的是浏览器窗口本身（或 iframe 视口） - 若需局部固定效果，可用
position: sticky替代，并配合父容器overflow: hidden控制可见区域
transform 会创建新的层叠上下文和裁剪容器
现代实践中，一个常被忽略但非常重要的点：任何应用了 transform（非 none）的元素，都会自动成为其子元素的包含块和裁剪容器，即使它没设 position。
- 例如：
<div style="transform:translateZ(0); overflow:hidden"><div style="position:absolute; top:-20px">…</div></div>→ 会被裁剪 - 这在做动画、模态框、滑动组件时特别容易引发意外隐藏问题
- 调试时可检查 computed styles 中是否出现
transform: none被覆盖，或意外触发了新层叠上下文
