overflow: hidden 对绝对定位元素无效，是因为它只裁剪自身作为定位上下文的容器；若父元素非定位上下文（如 static），absolute 元素会向上查找至 body/html，导致裁剪失效。
移动端加了 overflow: hidden 却挡不住绝对定位元素溢出，根本不是样式没生效，而是它压根没作用在“该裁剪的对象”上。
为什么 overflow: hidden 对 position: absolute 子元素经常无效
浏览器只对「既是定位上下文（containing block），又设置了 overflow: hidden」的容器执行裁剪。如果父容器仍是 position: static（默认值），absolute 元素会往上找，最终锚定到 body 或 html —— 你给“看起来像父级”的容器加 overflow: hidden，等于裁剪了一个不相关的盒子。
- 检查 DevTools 的 “Computed” 面板，点开该元素，看
Containing block到底是哪个节点 - Flex/Grid 容器默认不创建定位上下文，即使设了
overflow: hidden也白搭，必须额外加position: relative - 父容器若高度塌陷（比如只含
absolute子项、无内容撑高），它的实际高度是0，overflow: hidden就会把整个子元素“裁成空气”
移动端滚动时 absolute 元素突然消失的真正原因
不是渲染崩溃，是被某个祖先节点悄悄裁掉了。最常见两种情况：
- 滚动容器（如轮播外层、Tab wrapper）设了
overflow: hidden或overflow: auto，但自身高度固定且内容没撑开它 → 浏览器判定“无溢出”，直接整块裁掉 - 滚动容器没设
position: relative，absolute元素锚定到body，一滚动就飘出视口边界，甚至被html的overflow: hidden截断 - iOS Safari（15.x–16.2）还有合成层陷阱：
transform: translateZ(0)不稳定，得用双写-webkit-transform: translate3d(0,0,0)+transform: translate3d(0,0,0)，且父级必须有position: relative
想让 absolute 元素“破框而出”，别硬调 z-index
z-index 只管谁在上面，不管裁不裁。哪怕设成 9999，只要还在被 overflow: hidden 的祖先里，超出部分照样被切掉。
- 纯 CSS 解法：现代浏览器可用
overflow: clip（Chrome 119+、Firefox 111+），语义清晰，不隐式创建层叠上下文 - 更通用做法：用 JS 把元素挂到
body下，动态算top/left；框架里优先用Portal（React）或Teleport（Vue） - 慎用
clip-path: inset(0)替代 —— 它不触发裁剪上下文，兼容性差，还和border-radius冲突，且禁用滚动
最难的从来不是写哪行 CSS，而是搞清“这个 absolute 元素到底锚在哪”和“谁在裁它”。DevTools 里点两下 Containing block，比调十次 z-index 快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
