CSS绝对定位元素超出父容器，根本原因是父容器未设position:relative创建定位上下文，导致其无法成为包含块；必须同时满足position:relative和overflow:hidden作用于同一元素，且需防范高度塌陷、transform干扰及z-index误用。
因为 position: absolute 的元素默认参照的是最近的「已定位祖先」，没找到就回退到视口（document.documentElement 或 body），而不是你直觉里的父容器。
父容器没设 position: relative
这是最常见原因。浏览器会一路往上找 position 值为 relative、absolute、fixed 或 sticky 的祖先；如果全都没有，就以视口为参考系——于是 top: 0; left: 0 变成“贴浏览器左上角”，而不是“贴父盒子左上角”。
- 父容器宽度仅 190px，子元素却飘到右侧去，大概率就是这个原因
- 即使父容器有 padding: 20px，子元素 top: 0; left: 0 也会顶破内边距，因为它压根没把父容器当坐标系
- overflow: hidden 在这种情况下完全无效——不是裁不掉，是它根本没被当作父容器的“内容”来参与溢出计算
left/right 同时设了非零值
比如 left: 0; right: -10px，浏览器会按规范忽略 width，用「包含块宽度 − left − right」反推实际宽度，结果变成父宽 + 10px，必然溢出。
- left: 0; right: 0 看似安全，但在 Safari 或缩放场景下可能因 padding 计算误差、DPR 小数像素四舍五入，导致横向滚动条
- 写了 width: calc(100% - 10px) 也白搭：只要 left 和 right 都存在，width 就被强制丢弃
- 验证方法：控制台执行 $$('body')[0].scrollWidth - window.innerWidth，结果 > 1 就基本锁定是这类定位干扰
父容器高度为 0，overflow: hidden 失效
如果父容器里只有 position: absolute 子元素，且没设 height、min-height 或其他撑高内容，它的计算高度就是 0。
- 此时加 overflow: hidden 不是裁剪溢出，而是直接让整个区域“不可见”——子元素看起来消失了，其实只是被一个高度为 0 的框吞掉了
- 这种情况在 flex 容器或某些 UI 库的 wrapper 里特别隐蔽，尤其当父容器还套着 display: contents 或 transform
- 解决不是硬加高度，而是确保父容器能建立 BFC：可选 overflow: hidden（配合明确 height）、display: flex、或 float: left
移动端缩放或第三方库干扰定位上下文
缩放后菜单飘出屏幕右侧，或者下拉菜单底部被截断，往往不是 CSS 写错了，而是定位锚点本身不稳定。
- 触发菜单的父元素如果用了 transform: scale() 或 translateX()，它会创建新的包含块，导致子元素定位基准偏移
- 第三方 UI 库（比如某些弹窗组件）可能把 position: absolute 元素挂载到了 body 下，但忘了给它的直接父级设 position: relative
- 更隐蔽的是：父容器用了 inset 或 contain: layout，在部分浏览器中会干扰定位祖先查找逻辑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
