position: relative 与 overflow: hidden 无法裁剪 absolute 子元素，因 relative 不触发 BFC；需加 display: flow-root 等创建 BFC 才生效。
position: relative 和 overflow: hidden 为什么不能裁剪子元素
因为 overflow 只对「建立块格式化上下文（BFC）」的容器生效，而 position: relative 默认不触发 BFC。即使给父元素设了 overflow: hidden，只要子元素用了 position: absolute 且脱离了文档流，它就可能溢出并显示出来。
解决方法是让父容器强制创建 BFC：
- 加
display: flow-root（推荐，语义清晰、无副作用） - 或
float: left/inline-block/position: absolute（但会改变布局行为，慎用） - 或
contain: layout（现代方案，兼容性稍弱）
.container {
position: relative;
overflow: hidden;
display: flow-root; /* 关键：激活 BFC */
}absolute 定位元素被 overflow: hidden 裁剪的条件
只有当 position: absolute 元素的「最近定位祖先」（即最近的 position 值为 relative、absolute、fixed 或 sticky 的祖先）同时设置了 overflow: hidden，且该祖先本身是 BFC 容器时，裁剪才生效。
常见陷阱：
立即学习“前端免费学习笔记（深入）”；
- 父元素只有
position: relative但没设overflow→ 不裁剪 - 父元素设了
overflow: hidden但没触发 BFC → 大概率不裁剪（尤其含absolute子元素时） - absolute 元素的定位参考的是
offsetParent，不是 CSS 层级上最近的 relative 父级（例如中间有transform也会改变 offsetParent）
fixed 定位与 overflow 几乎完全无关
position: fixed 元素脱离普通文档流，其定位参考是视口（viewport），不是父容器。因此无论父级怎么设 overflow，都影响不到它。
如果想限制 fixed 元素的显示范围，只能：
- 在它自身上加
overflow: hidden（仅控制它内部内容） - 用
clip-path或mask做视觉裁剪（注意兼容性和性能） - 改用
position: absolute+ 合适的定位上下文（比如 modal 挂在 body 下，再用 wrapper 控制尺寸）
.modal-overlay {
position: fixed;
top: 0; left: 0;
width: 100vw; height: 100vh;
overflow: hidden; /* 这里只管它自己内部的内容溢出 */
}overflow: auto/scroll 在 flex/grid 容器里的表现异常
Flex 和 Grid 容器默认不产生 BFC，且它们的子项（flex item / grid item）即使设了 overflow: hidden，也不一定按预期裁剪内容——尤其当子项使用 min-width: 0 或 min-height: 0 缺失时，浏览器会优先保持内容可读性，导致溢出。
典型修复方式：
- 给溢出子项显式加
min-width: 0（flex row）或min-height: 0（flex column） - 或者给父 flex/grid 容器加
overflow: hidden并配合display: flow-root - 避免在 flex item 上直接设
position: absolute后又依赖父容器 overflow 裁剪
最稳妥的做法：把需要裁剪的内容包一层 div，让它成为独立 BFC 容器。
