overflow:hidden无法裁切绝对定位子元素，因其脱离文档流，包含块为最近非static定位祖先；需父级设position:relative触发bfc并成为包含块，再配合z-index创建层叠上下文方可生效。
overflow:hidden 为什么裁不掉绝对定位子元素
因为 overflow:hidden 只对「自身形成块级格式化上下文（BFC）」且「子元素在正常流中或相对定位」时才生效；绝对定位元素脱离文档流，其渲染层叠和裁切边界取决于最近的「定位上下文（positioned ancestor）」，而非父容器的 overflow 设置。
- 常见错误现象：
div设了overflow:hidden，但里面position:absolute的弹窗、下拉菜单、tooltip 依然溢出显示 - 根本原因：绝对定位元素的包含块（containing block）是最近的「非 static 定位祖先」，如果父级是
position:static（默认），那包含块其实是初始包含块（通常是视口），裁切自然失效 - 解决路径只有一条：让父容器成为它的包含块 → 给父级加
position:relative（或其他非 static 值） - 注意：加
position:relative本身不改变布局，但会触发 BFC 并成为包含块，此时overflow:hidden才能真正裁切其内部绝对定位子元素
position:relative + overflow:hidden 的组合是否总能生效
不是。即使父级设了 position:relative 和 overflow:hidden，仍可能失效——关键看子元素的 z-index 和层叠上下文是否绕过了裁切。
- 典型场景：子元素设置了
z-index:9999，而父级没有创建层叠上下文（如没设z-index或opacity等），此时子元素可能在父级渲染层之上，overflow:hidden失效 - 参数差异：
z-index只在「同层叠上下文内」比较；父级若没生成新层叠上下文，子元素的 z-index 就和 body 下其他元素同级，裁切无效 - 修复方式：给父级加
z-index:0（或任意值）+position:relative，强制创建层叠上下文 - 兼容性提示：IE7+ 支持该组合，但 IE6 对
z-index层叠上下文处理异常，已基本可忽略
用 transform 触发 BFC 后 overflow:hidden 是否有效
有效，但行为和 position:relative 不同：它会让父容器成为包含块，且无需显式设定位属性，但要注意 transform 本身的渲染副作用。
- 使用场景：不想改定位逻辑，又需要裁切浮动/绝对定位子元素时，可用
transform:translateZ(0)或transform:scale(1) - 为什么有效：任何非 none 的
transform都会触发 BFC，并使该元素成为其子元素（包括position:absolute）的包含块 - 容易踩的坑：
transform会创建新的层叠上下文，可能意外遮挡兄弟元素；移动端还可能引发滚动卡顿或模糊（尤其配合will-change时） - 性能影响：比
position:relative开销略大，纯裁切需求优先选后者
overflow:hidden 裁切失效的快速排查顺序
别猜，按顺序查这四点，90% 的问题当场定位。
立即学习“前端免费学习笔记（深入）”；
- 父容器是否设置了
position且值不为static？（必须） - 父容器是否已触发 BFC？除了
position，也可检查是否有float、display:flow-root、overflow非 visible 等 - 子元素是否真的以该父容器为包含块？用浏览器开发者工具「Computed」面板看它的 «Containing Block» 是谁
- 是否存在更高层的层叠上下文把子元素“托”出去？检查父级及祖先是否有
z-index、opacity、filter等触发新层叠上下文的属性
最常被忽略的是「包含块」和「层叠上下文」这两个概念混用。裁切是视觉渲染阶段的行为，依赖的是包含块边界；而显示与否，还受层叠顺序控制——两者缺一不可。
