父容器必须设position: relative，否则overflow: hidden无效；relative建立包含块使absolute子元素相对其定位，并配合width/max-width控制尺寸，避免溢出。
父容器必须设 position: relative
不加这个，overflow: hidden 就是摆设。浏览器会把 position: absolute 子元素的定位参考往上找，直到 body 或视口——此时 top、left 是相对于整个页面算的，跟父容器尺寸完全无关。
常见现象：.parent 宽 200px，子元素却飘到右边去；或者父容器有 padding: 20px，但子元素 top: 0; left: 0 看起来像“顶破”了内边距。
-
.parent必须同时声明position: relative和overflow: hidden - 仅设
overflow: hidden而不设position: relative，裁剪行为不会生效 -
position: relative本身不改变布局，只建立包含块，可以放心加
width 和 max-width 不是可选的
position: relative 只是建了个坐标系，并不自动让子元素“听话”。它默认仍按自身内容渲染，容易溢出。
只加 top/left 不控尺寸，子元素仍可能撑出边界。
立即学习“前端免费学习笔记（深入）”；
- 显式设置
width: 100%或width: max-content配合max-width: 100% - 长文本场景推荐
width: max-content; max-width: 100%，避免被意外压缩（IE 全系不支持max-content） - 慎用
width: fit-content：Safari 对它的盒模型计算更敏感，易触发横向滚动条
transform 会让 overflow: hidden 失效
给绝对定位元素加 transform: translateX()、rotate() 或 scale()，会创建新层叠上下文和包含块，导致父级 overflow: hidden 大概率失效——尤其在 Safari 和旧版 Firefox 中。
- 优先改用
top/left+calc()或负margin实现位移 - 若必须用
transform（如动画），把overflow: hidden移到该元素的**直接父容器**，并确保那个父容器有position: relative - 不要依赖
clip-path替代：它本质仍是裁剪，不是“防越界”，且clip-path: round()在 Safari 支持不全
移动端 position: fixed 无法被裁剪
iOS Safari 和部分安卓 WebView 中，position: fixed 元素天然脱离普通文档流，不会被父级 overflow: hidden 裁剪——哪怕父容器有 position: relative 也没用。这不是写错了，是渲染机制限制。
- 固定定位元素（如底部导航、返回顶部按钮）应直接挂载在
body下 - 不要嵌套在带
overflow: hidden的容器里 - 如果必须嵌套，需改用
position: absolute+top: calc(100vh - Xpx)模拟 fixed 效果
真正卡住越界的点，往往不在子元素本身，而在父容器是否建立了有效的包含块、是否被 transform 或 fixed 意外绕过、以及宽度控制是否覆盖了所有内容形态。这些细节一旦漏掉一个，overflow: hidden 就只是个装饰。
