绝对定位元素超出父容器的根本原因是父容器未设position: relative，导致定位基准错误；应给父容器添加position: relative以建立正确的定位上下文。
绝对定位元素超出父容器，不是 CSS “失效”了，而是它压根没把父容器当坐标系——position: absolute 的定位参考永远是「最近的已定位祖先」，不是 HTML 结构上的父级。
父容器没设 position: relative，定位基准就错了
这是 90% 场景下的根本原因。浏览器会从子元素往上找第一个 position 值为 relative、absolute、fixed 或 sticky 的祖先；找不到，就落到 body 上。此时 top: 0; left: 0 是贴浏览器左上角，不是贴父盒子左上角。
常见表现：
- 父容器宽 200px，子元素却飘到右侧看不见的位置
- 加了
overflow: hidden完全没反应 - 开发者工具里看该子元素的
Containing block显示为html或body
解决方法很简单：给父容器加上 position: relative（它不改变布局，只建立定位上下文）。
正确写法：
.parent { position: relative; overflow: hidden; }
错误写法：
.parent { overflow: hidden; }
left 和 right 同时设非零值，宽度被强制重算
CSS 规范规定：当 left 和 right 都存在且非 auto 时，width 会被忽略，实际宽度 = 包含块宽度 − left − right。结果常常是负数或远超预期。
比如：
.child { position: absolute; left: 10px; right: -20px; }
等价于宽度 = 父宽 + 30px → 必然溢出。
检查方式：在控制台运行 document.body.scrollWidth - window.innerWidth，结果 > 1 就基本锁定是这类干扰。
安全做法：
- 只用
left或right中的一个 +width - 要用双方向对齐时，改用
left: 0; right: 0;（注意 Safari 缩放下可能有小数像素误差） - 避免混合
width: 100%和left/right
父容器高度塌陷，overflow: hidden 失去裁剪对象
如果父容器内部只有 position: absolute 子元素，它会坍缩为高度 0 —— 此时 overflow: hidden 还在，但容器本身几乎不可见，子元素看起来像“消失”了，其实是被一个高度为 0 的框吞掉了。
解决方案分两类：
- 显式撑高：加
height、min-height，或用padding占位 - 用布局模式自动撑高：改用
display: flex或display: grid，但注意它们默认不创建定位上下文，仍需额外加position: relative
别依赖 h-full 或 flex-1：它们需要父级已有尺寸，否则照样塌陷。
transform 创建新包含块，让裁剪失效
给绝对定位子元素加 transform: translateY(-50%) 或 scale(0.9)，会创建新的层叠上下文和新的包含块。此时父容器的 overflow: hidden 在 Safari 和旧版 Firefox 中基本无效。
实操建议：
- 居中优先用
top: 50%; left: 50%; margin-top: -Xpx; margin-left: -Ypx或top: 0; bottom: 0; left: 0; right: 0;+margin: auto - 若必须用
transform（如动画），就把overflow: hidden移到该子元素的**直接父容器**，并确保那个父容器有position: relative -
overflow: clip是更语义化的替代方案（Chrome 119+、Firefox 111+ 支持），但它不能和border-radius共存
最容易被忽略的点，是以为加了 overflow: hidden 就万事大吉，却没确认它是否真的作用在那个“定位参考祖先”上。打开开发者工具，直接看子元素的 Containing block 计算值，比调十次 z-index 更快定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
