必须同时设置position: relative和overflow: hidden，否则overflow: hidden对绝对定位子元素无效；因绝对定位元素以最近已定位祖先为包含块，而非视觉父级。
父容器没设 position: relative，overflow: hidden 就是摆设
绝对定位元素只认「最近的已定位祖先」，不是你眼睛看到的那个父盒子。如果父容器还是默认的 position: static，浏览器会一路往上找，直到 body 或视口——此时 top: 0; left: 0 是贴浏览器左上角，不是贴父盒子左上角。
你在视觉父级上加 overflow: hidden，等于在错误对象上贴胶布。必须同时满足两个条件：
-
position: relative（或其他非static值）建立包含块 -
overflow: hidden作用于同一个元素
常见误写：.parent { overflow: hidden; } → 正确写法是 .parent { position: relative; overflow: hidden; }。position: relative 本身不改变布局，只创建定位上下文，可以放心加。
left 和 right 同时设非零值，宽度就被浏览器“算没了”
比如 left: 0; right: -10px，浏览器会按规范忽略 width，用「包含块宽度 − left − right」反推实际宽度，结果变成父宽 + 10px，必然溢出。
看似安全的 left: 0; right: 0 也有隐患：在 Safari 或页面缩放时，可能因 padding 计算误差、DPR 小数像素四舍五入，导致横向滚动条。
验证方法：控制台执行 $$('body')[0].scrollWidth - window.innerWidth，结果 > 1 就基本锁定是这类定位干扰。
写了 width: calc(100% - 10px) 也白搭：只要 left 和 right 都存在，width 就被强制丢弃。
父容器高度为 0，overflow: hidden 裁了个寂寞
如果父容器里只有 position: absolute 子元素，且没设 height、min-height 或其他撑高内容，它的计算高度就是 0。
此时加 overflow: hidden 不是裁剪溢出，而是直接让整个区域“不可见”——子元素看起来消失了，其实只是被一个高度为 0 的框吞掉了。
这种情况在 flex 容器或某些 UI 库的 wrapper 里特别隐蔽，尤其当父容器还套着 display: contents 或 transform。
解决不是硬加高度，而是确保父容器能建立 BFC：
- 可选
overflow: hidden（但需配合明确height） -
display: flex或display: grid，它们能自动撑起父容器高度 - 注意：Flex/Grid 容器默认不创建定位上下文，仍需显式加
position: relative
transform 或 fixed 让定位上下文“漂移”了
给父容器加 transform: scale() 或 translateX()，它会创建新的包含块，导致子元素定位基准偏移。这种情况下，即使父容器有 position: relative 和 overflow: hidden，裁剪也大概率失效——尤其在 Safari 和旧版 Firefox 中。
position: fixed 元素天然脱离普通文档流，在 iOS Safari 和部分安卓 WebView 中，不会被父级 overflow: hidden 裁剪——哪怕父容器有 position: relative 也没用。
真正有效的做法不是调 z-index，而是把 DOM 移到更高层级：
- 挂到
body下，用 JS 动态计算top/left - 现代框架可用
Portal（React）或Teleport（Vue）实现 DOM 提升 - 纯 CSS 场景可尝试
overflow: clip（Chrome 119+、Firefox 111+ 支持），但 Safari 兼容性差
最容易被忽略的点，是以为“加了 overflow: hidden 就万事大吉”，却没检查它是否真的作用在那个“定位参考祖先”上。用开发者工具看一眼 Computed → Containing block，比调十次 z-index 更快定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
