广告遮挡本质是z-index层叠上下文失控，需确保广告与关键元素同属一层叠上下文，显式设置position和z-index，避免父容器意外创建新上下文，并针对旧版WebView改用DOM顺序或transform优化。
广告遮挡内容，本质是 z-index 层叠顺序失控，不是“加个高数值就能解决”的简单问题。直接给广告容器设 z-index: 9999 往往适得其反——它可能盖住导航、按钮甚至整个交互区域，而且在旧版浏览器或特殊渲染上下文中极易失效。
广告容器必须参与同一层叠上下文
很多广告（尤其是第三方 JS 注入的）会动态插入一个 div 并设 position: fixed，但它的父容器没设 position: relative，导致该广告自成一个独立层叠上下文。此时你给页面其他元素设再高的 z-index，也压不住它。
- 检查广告容器的父级是否意外创建了新层叠上下文：比如有
opacity 、<code>transform、filter或will-change - 若广告由第三方 SDK 插入，优先用 CSS 选择器定位其最外层容器（如
.ad-banner或[data-ad-slot]），并确保它和你要保护的内容共用同一个定位父容器 - 必要时，在广告容器上显式加
isolation: isolate来隔离其内部层叠行为，避免污染全局
关键元素必须显式声明 position 和 z-index
z-index 对 position: static（默认值）完全无效。常见错误是只给导航栏设 z-index: 10，却忘了它本身没设 position。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 导航栏（
.header或.nav）应设position: sticky或position: fixed+z-index: 100 - 主内容区（
.main）若需“浮”在广告下方，可设position: relative+z-index: 1（注意：不能为负值，否则可能被父容器裁剪） - 广告容器本身建议设
position: fixed+z-index: 90，留出余量给核心交互层 - 所有涉及层叠的元素，父容器最好统一设
position: relative，避免隐式层叠上下文分裂
移动端 WebView 和旧版 Android 的兼容陷阱
某些 Android WebView（尤其 4.4–6.0）对 z-index 支持极弱，即使样式写对，广告仍可能穿透覆盖。这不是 bug，是渲染引擎限制。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
z-index在这些环境下压制广告；改用 DOM 顺序控制：把广告<div> 放在 <code>最底部，靠文档流自然沉底 - 若广告必须固定在顶部/底部，可用
transform: translateZ(0)强制触发硬件加速，部分机型能改善层级判断 - 对关键按钮（如返回、关闭、购买），加
pointer-events: auto !important，防止被广告容器的透明区域拦截点击 - 测试时务必真机运行，Chrome DevTools 的模拟器无法复现这类渲染异常
真正难的不是写对那几行 z-index，而是确认所有相关元素是否处于同一层叠上下文、是否被无意中创建的新上下文隔断——这点在嵌套较深或引入多个第三方脚本时最容易被忽略。
