根本原因是overflow:hidden仅裁剪以该容器为包含块的absolute元素，而包含块由最近非static定位祖先决定；必须同时设置position:relative和overflow:hidden才能生效。
overflow:hidden 对 absolute 子元素“有时无效”的根本原因
它根本不是“隐藏”，而是「裁剪」——但裁剪只作用于该容器作为「包含块（containing block）」时的子元素。而 position: absolute 元素的包含块，由「最近的已定位祖先（position ≠ static）」决定，不是视觉父级。如果你只写了 .parent { overflow: hidden; }，但没加 position: relative，那它的包含块很可能是 body 或更上层元素，overflow: hidden 自然不生效。
让 overflow:hidden 真正裁剪 absolute 子元素的必要条件
必须同时满足两个条件，缺一不可：
-
父容器设置position: relative（或absolute/fixed/sticky），使其成为绝对定位子元素的包含块 -
父容器同时设置overflow: hidden（或auto、scroll）
常见误写：.card { overflow: hidden; } → 正确应为 .card { position: relative; overflow: hidden; }。用浏览器开发者工具选中子元素，看右侧面板的 Containing block 是谁，比反复调 z-index 有用十倍。
Flex/Grid 容器里 overflow:hidden 为什么也失效？
Flex 和 Grid 容器虽然自动触发 BFC（能包裹浮动、防止坍塌），但它们默认 position: static，不创建定位上下文。所以内部的 position: absolute 子元素依然会往上找包含块。
修复方式很简单：给 Flex/Grid 父容器显式加 position: relative。例如：
.list {
display: flex;
position: relative; /* 关键 */
overflow: hidden;
}
注意：display: flex 本身不会让 overflow: hidden 对 absolute 子项生效；别指望靠 flex-basis 或 width 补救——没有定位上下文，裁剪就无从谈起。
移动端 Safari 中 overflow:hidden 漏裁的补救手段
iOS Safari 有个经典 bug：当父容器同时用了 transform（比如 scale、translateZ），可能绕过 overflow: hidden 的裁剪边界，导致绝对定位子元素“漏出来”。
临时解法（慎用）：
- 加
-webkit-mask-image: linear-gradient(transparent, transparent)，强制启用裁剪 - 或改用
overflow: clip（Chrome 119+ / Firefox 111+ 支持，语义准确且不隐式创建层叠上下文） - 避免对裁剪容器使用
transform；如需动画，优先动子元素而非父容器
最常被忽略的一点：你以为加了 overflow: hidden 就安全了，其实它是否生效，完全取决于「谁是包含块」——而不是 DOM 树里它看起来像不像“爸爸”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
