overflow: hidden 无法裁剪 position: absolute 元素，因其包含块是最近非 static 祖先而非视觉父容器；需同时设置父容器 position: relative 和 overflow: hidden 才生效。
overflow: hidden 为什么裁不掉 position: absolute 元素
因为 overflow: hidden 只对「在自身包含块内渲染」的元素生效，而 position: absolute 元素的包含块是最近的非 static 定位祖先——不是视觉上的父容器，更不是仅设了 overflow: hidden 的 static 父级。
常见错误现象：
- 父容器写了
overflow: hidden，但子元素仍从顶部/右侧“捅出来” - 开发者工具里看到子元素
top: -20px，却没被裁掉 - Computed 面板中显示该子元素的 Containing Block 是
body或某个远祖节点
根本原因：裁剪发生在绘制前，且只作用于「既是定位上下文又是 BFC 容器」的元素。如果父容器仍是 position: static（默认值），它既不是定位上下文，也无法成为该 absolute 元素的包含块，overflow: hidden 就形同虚设。
必须同时满足 position: relative 和 overflow: hidden
让父容器真正成为裁剪源，只需两步，缺一不可：
- 给父容器加
position: relative（或其他非static值），创建定位上下文 - 在同一元素上加
overflow: hidden，使其同时成为 BFC 容器和包含块
示例写法（有效）：
.card {
position: relative;
overflow: hidden;
width: 300px;
height: 200px;
}
.card img {
position: absolute;
top: -10px;
left: -10px;
width: 320px;
height: 220px;
}
错误写法（无效）：
-
.card { overflow: hidden; }→ 缺少position，不构成包含块 -
.card { position: relative; }→ 缺少overflow，不触发裁剪
transform 会让 overflow: hidden 失效（尤其 iOS）
如果子元素用了 transform: translateY(-50%)、scale(0.95) 或 translateZ(0)，它会创建新的层叠上下文和包含块，导致父容器的 overflow: hidden 在 Safari 和旧版 Firefox 中直接失效。
实操建议：
- 优先用
top/left+calc()或负margin实现偏移或居中 - 若必须用
transform（比如动画），就把overflow: hidden上移到它的**直接父容器**，并确保该父容器有position: relative - iOS 圆角容器上还漏内容？加
transform: rotate(0deg)或will-change: transform强制升层，但注意性能损耗
fixed 元素完全不受父级 overflow 影响
position: fixed 元素的包含块永远是视口（viewport），与 DOM 层级无关。哪怕你把 overflow: hidden 加到 或 上，它照样显示在屏幕任意位置。
想限制 fixed 元素可见范围，只能：
- 用
clip-path: inset()手动框定区域（注意 Safari 兼容性） - 改用
position: sticky，配合父容器overflow: hidden控制滚动可见区 - JS 动态计算位置并挂载到
document.body下，再用top/left定位（适合 Tooltip / Popover）
最容易被忽略的一点：即使父容器同时满足 position: relative 和 overflow: hidden，如果子元素设置了 z-index 但父容器没形成层叠上下文（比如没设 z-index 或 opacity），裁剪仍可能在某些渲染路径下失效——此时给父容器加 z-index: 0 是最轻量的修复方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
