overflow:hidden使position:absolute元素“消失”是因裁剪而非隐藏；其根本原因是该父容器既是定位祖先又触发bfc，成为包含块与裁剪边界，且裁剪发生在绘制前，z-index无效。
为什么overflow:hidden会让position: absolute元素“消失”
不是元素被删了或display: none了，是它被裁剪掉了——而且裁剪发生在绘制阶段之前，z-index再高也没用。
关键在两点：一是absolute元素的包含块（containing block）由最近的非static定位祖先决定；二是overflow:hidden只对「同时满足两个条件」的容器生效：它既是那个定位祖先，又建立了块级格式化上下文（BFC）。如果这两个身份重合，超出边界的子项就会被视觉截断。
常见误判：div#popup的直接父级没设overflow，但它的祖父级有position: relative且overflow: hidden——这时#popup仍会被裁剪，因为它以祖父为包含块。
怎么确认当前定位参考基准是否就是overflow:hidden容器
打开浏览器开发者工具，选中那个“消失”的absolute元素，看Computed面板里的Containing Block来源。再逐层往上点父节点，检查：
- 哪个祖先有
position: relative/absolute/fixed/sticky - 这个祖先是否同时设置了
overflow: hidden、auto或scroll - 这个祖先是否是BFC容器（
display: flex/grid/flow-root或float等也会触发BFC）
只要这三项全中，它就是裁剪源。别只盯着直接父级看。
调整定位参考基准的实操方式
目标是让absolute元素换一个不带overflow的定位祖先。可行路径有：
- 把
position: relative上移到外层不设overflow的容器上（比如从.card-body挪到.card） - 给
absolute元素自身加position: fixed（适合悬浮按钮、全局提示这类不需要随滚动位移的场景） - 用
transform: translateZ(0)强行创建新层叠上下文？不推荐——它可能意外让父级变成裁剪边界，且不解决根本问题
注意：fixed会脱离文档流，若需响应滚动位置（比如锚点跟随），得配合getBoundingClientRect()或IntersectionObserver动态更新top/left。
overflow: clip和clip-path: inset(0)能替代吗
可以，但要看场景和兼容性：
-
overflow: clip语义更准确，不触发滚动机制，也不会裁剪absolute子项；Chrome 119+ 支持，Firefox/Safari 尚未跟进 -
clip-path: inset(0)视觉效果类似overflow: hidden，但不建立裁剪上下文，absolute元素可自由溢出；Chrome 107+、Firefox 111+、Safari 16.4+ 支持，IE 完全不支持 - 二者都不支持滚动条——需要滚动时，必须回到
overflow: auto并在子容器上单独设overflow-y: auto
真正容易被忽略的是：一旦父容器用了border-radius或box-shadow，clip-path会覆盖圆角或切掉阴影，得手动补padding或改用mask。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
