overflow:hidden对absolute元素无效，是因为该属性仅对既是定位祖先（如position:relative）又触发bfc的容器生效；若父容器未设非static定位，则absolute元素以更上层祖先或视口为包含块，裁剪自然不作用于它。
只加 overflow: hidden 不生效，是因为父容器没建立定位上下文——必须同时设 position: relative。
为什么 overflow: hidden 对 position: absolute 子元素没反应
绝对定位元素的定位参考是「最近的已定位祖先」，不是视觉上的直接父级。如果父容器仍是 position: static（默认值），那子元素会往上找，甚至落到 body 上。此时你在它“看起来像父级”的容器上加 overflow: hidden，等于在错误对象上操作。
- 浏览器只对「既是包含块，又设置了
overflow: hidden」的容器执行裁剪 -
position: relative本身不改变布局，但会创建包含块，这是裁剪生效的前提 - 常见误写：
.parent { overflow: hidden; }→ 必须补成.parent { position: relative; overflow: hidden; }
overflow: hidden 在 Flex/Grid 容器里为什么也失效
Flex 和 Grid 容器默认不创建新的定位上下文，即使它们自动触发 BFC（块级格式化上下文），overflow: hidden 依然无法约束内部的 position: absolute 子元素——因为缺少 position 声明。
- 修复方式：给 Flex/Grid 父容器显式加
position: relative - 注意：不要依赖
display: flex自带的“撑高”能力来挽救裁剪，高度塌陷时裁剪对象本身已不存在 - iOS Safari 中，偶尔有渲染延迟，可临时加
transform: translateZ(0)强制重绘，但别滥用，可能意外创建新层叠上下文
想让 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+ 支持），语义更干净，且不隐式创建层叠上下文 - 慎用
clip-path: inset(0)替代——它不触发裁剪上下文，但兼容性差、不能和border-radius共存，且禁用滚动
最容易被忽略的点，是以为“加了 overflow: hidden 就万事大吉”，却忘了检查它是否真的作用在那个“定位参考祖先”上。开发者工具里看一眼 Containing block，比调十次 z-index 更快定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
