父容器必须设 position: relative，否则 overflow: hidden 无效；子元素 absolute 定位会脱离父容器参考系，导致溢出或错位；正确写法是父容器同时设 position: relative 和 overflow: hidden，子元素需明确 width 和定位值。
父容器必须设 position: relative
不加这个，overflow: hidden 就是摆设。浏览器会把 position: absolute 子元素的定位参考往上找，直到 body 或视口——此时子元素的 top、left 是相对于整个页面算的，跟父容器尺寸完全无关。常见现象：父容器宽 200px，子元素却飘到右边去；或者父容器有 padding: 20px，但子元素 top: 0; left: 0 看起来像“顶破”了内边距。
overflow: hidden 必须和 position: relative 写在同一层
把 overflow: hidden 加在祖父级或兄弟容器上没用，它只裁剪「属于该元素包含块」的内容。而这个包含块，得由 position: relative 显式建立。正确写法就是：
.parent {
position: relative;
overflow: hidden;
}
.child {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
注意：width: 100% 不是可选的——只加定位不控尺寸，子元素仍可能撑出边界。
子元素尺寸和偏移必须适配父容器
position: relative 只是建了个坐标系，并不自动让子元素“听话”。它默认仍按自身内容渲染，容易溢出。要防住，得组合控制：
- 用
width: max-content配合max-width，解决长文本被意外压缩的问题（现代浏览器支持良好，IE 全系不支持） - 避免仅靠
transform: translate()定位，它会创建新层叠上下文，导致父级overflow: hidden失效 - 如果子元素用了
transform（比如旋转、缩放），overflow: hidden裁剪大概率失效，得换思路——要么移出 DOM 结构，要么改用clip-path（但注意 Safari round() 支持不全）
移动端 position: fixed 和 overflow: hidden 冲突
iOS Safari 和部分安卓 WebView 中，position: fixed 元素天然脱离普通文档流，不会被父级 overflow: hidden 裁剪——哪怕父容器有 position: relative 也没用。这不是写错了，是渲染机制限制。固定定位元素（如底部导航、返回顶部按钮）应直接挂载在 body 下，不要嵌套在带 overflow: hidden 的容器里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
