overflow: hidden 无法裁剪绝对定位子元素，除非父容器设为非 static 定位（如 position: relative）并形成定位上下文；fixed 元素完全不受祖先 overflow 影响；overflow 触发 BFC 不自动赋予裁剪能力；需同时满足定位上下文和层叠上下文（如 z-index）才能正确裁剪。
overflow: hidden 为什么切不掉绝对定位子元素
绝对定位元素（position: absolute）脱离普通文档流，其显示范围由**最近的非 static 定位祖先**决定，而不是直接父容器。如果父容器仅设了 overflow: hidden 但自身 position 是默认的 static，那它根本不会成为“裁剪上下文”，子元素照样溢出可见。
解决办法很简单：让父容器变成定位上下文。常见做法是加 position: relative（不影响布局），再配 overflow: hidden：
.container {
position: relative;
overflow: hidden;
width: 200px;
height: 150px;
}
.child {
position: absolute;
top: -10px;
left: -10px;
width: 220px;
height: 170px;
}
此时 .child 的超出部分会被 .container 裁剪。
fixed 定位元素完全无视父级 overflow
position: fixed 元素以视口为参考系，与 DOM 层级和父容器的 overflow 设置完全无关。哪怕你给 或 设了 overflow: hidden，fixed 元素仍会显示在视口内——除非你显式隐藏视口滚动或用 clip-path 等手段干预。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
fixed元素不受任何祖先overflow影响，包括overflow: hidden - 想限制它的可见区域？只能靠视口尺寸、
transform位移后裁剪，或用clip-path: inset(...) - 注意：某些旧版 Safari 对
clip-path+fixed组合支持不稳定
overflow: scroll / auto 触发 BFC 后对 float 和绝对定位的影响
设置 overflow 为 scroll、auto 或 hidden 会强制创建块级格式化上下文（BFC），这会改变内部浮动元素的布局行为（比如自动清除浮动），但对绝对定位子元素的裁剪逻辑不变——仍取决于是否有定位祖先。
关键点：
- BFC 主要影响内部
float、margin-collapse和contain行为，不自动赋予裁剪能力 - 只有当该 BFC 容器本身是定位上下文（即
position != static）时，才可能裁剪absolute子元素 - 若容器是
overflow: auto且position: static，滚动条会出现，但absolute子元素仍可能溢出到容器外并遮挡其他内容
z-index 和 overflow 配合时的层级陷阱
当一个有 overflow: hidden 的定位容器内含多个 absolute 子元素，且设置了不同 z-index，裁剪会按层叠上下文边界执行：子元素先按 z-index 排序，再统一被父容器的裁剪框裁剪。但如果父容器没有形成新的层叠上下文（比如没设 z-index 且不是定位元素），子元素的 z-index 就会相对于更外层上下文计算，导致裁剪和层级错位。
典型问题场景：
- 父容器
position: relative但没设z-index→ 不创建新层叠上下文 → 子元素z-index外溢 - 正确做法：父容器加上
z-index: 0（或任意数字），确保它成为层叠上下文根，同时保持overflow: hidden - 否则可能出现“明明在下面的元素，却盖住了上面的裁剪区”这类视觉矛盾
overflow 值，而要看它是否落在一个有效的定位上下文+层叠上下文中。漏掉 position 或 z-index 中任意一环，overflow 就只是个摆设。 
