本文介绍一种无需移动 dom 结构、仅通过 css 即可使子元素（如插入的图片）无视绝对定位父容器 `overflow: hidden` 裁剪的可靠方案，特别适用于 chrome 插件等无法自由调整页面结构的场景。
在 Web 开发中，当一个元素被嵌套在 overflow: hidden 的父容器内时，其超出部分默认会被裁剪——这是 CSS 渲染规范的正常行为。但当该父容器本身是 position: absolute（或 fixed/sticky）时，常规的“将父容器改为 position: relative”等 hack 方式往往失效，因为这会破坏原有布局逻辑，尤其在第三方页面（如 Chrome 插件注入场景）中不可控。
核心思路：不改变裁剪边界，而是让元素「视觉上溢出」
关键在于理解：overflow: hidden 裁剪的是 其格式化上下文（BFC）内、且未建立新层叠上下文（stacking context）的后代元素。而一旦子元素自身触发了新的层叠上下文（例如通过 z-index 配合 position: absolute/fixed/relative），它虽仍受父容器 BFC 的几何裁剪影响，但在视觉层叠层面可突破显示限制——前提是它不参与父容器的裁剪计算逻辑。
✅ 正确解法如下：
<div id="page">
<div id="container" style="position: absolute; overflow: hidden;">
<img
src="example.png"
style="position: absolute;
z-index: 1000;
pointer-events: none;" />
</div>
</div>- z-index: 1000（需配合 position: absolute）：为
创建独立层叠上下文，并将其置于父容器内容层之上。虽然 overflow: hidden 仍在几何上“框住”该元素，但在多数现代浏览器（Chrome/Firefox/Edge）中，绝对定位 + 高 z-index 的组合可实现视觉上的“穿透式溢出”效果——即图像实际像素渲染超出容器边界，且不被裁剪。
- pointer-events: none：确保该覆盖图不拦截鼠标事件（如点击、悬停），使底层网页功能完全不受干扰。这对 Chrome 插件至关重要，避免破坏原页面交互。
⚠️ 注意事项：
- 此方案不改变 DOM 层级或父容器定位方式，兼容任意嵌套深度与复杂布局；
- z-index 值需足够高（建议 ≥ 1000），以规避页面中可能存在的其他层叠上下文干扰；
- 若父容器设置了 transform、filter 或 will-change 等属性，可能意外创建新的包含块（containing block）或裁剪上下文，此时需额外测试；必要时可对
添加 transform: translateZ(0) 强制硬件加速并稳定层叠行为；
- 不推荐依赖 clip-path 或 mask 等替代方案——它们本质仍是裁剪，无法真正“溢出”。
? 总结：对于 Chrome 插件等需动态注入内容的场景，优先使用 position: absolute + z-index + pointer-events: none 组合，而非重构 DOM。它轻量、可靠、无副作用，是突破 overflow: hidden 限制的工程级最佳实践。
