广告错位主因是布局干扰而非代码错误，需优先检查父容器position、overflow及盒模型；其次排查浮动塌陷、尺寸溢出与零宽字符。
广告错位不是代码写错了，而是它被其他样式或布局机制“挤偏”了——直接查 position、z-index、父容器 overflow 和盒模型计算，比重写广告代码更快。
检查广告容器是否脱离文档流
广告常用 position: absolute 或 position: fixed，但若其最近的非 static 定位祖先缺失，就会相对 body 或视口定位，导致在不同屏幕或滚动后突然右偏/下坠。
实操建议：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用开发者工具选中广告元素，在 Styles 面板确认它的
position值 - 往上逐级检查父元素是否有
position: relative（或absolute/fixed）；没有就加，别依赖 body - 如果广告是
fixed，检查body是否漏了padding-top补高，否则它会压住顶部内容 - 避免对广告父容器设
overflow: hidden——它会裁掉absolute子项超出部分，看起来像“消失”
排查浮动与清除失效引发的塌陷
旧式广告位常嵌在 float 导航或侧栏旁，一旦父容器没清除浮动，高度坍缩，广告就会“掉进”上层内容的空白里，表现为整体下移或右侧悬空。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 选中广告的直接父容器，在 Elements 面板看 computed height 是否为 0
- 临时加
overflow: hidden或display: flow-root测试：若广告位置恢复，说明是浮动塌陷 - 优先用伪元素清除：
::after { content: ""; display: table; clear: both; }，比clear: both更可靠 - 现代项目直接删掉所有
float，改用display: flex排列广告容器与相邻模块
验证广告内部尺寸是否超限
广告图或 iframe 宽度设为 100% 时，若父容器有 padding、border 或未重置 box-sizing，实际宽度会溢出，触发横向滚动或内部子项换行错位。
实操建议：
- 打开开发者工具的 Box Model 视图，看广告元素的 border-box 宽度是否 > 父容器宽度
- 全局加
* { box-sizing: border-box; }，再单独给广告容器设width: 100% - 广告内图片别只靠
width: 100%，补一句height: auto防止拉伸变形 - iframe 广告务必设
width: 100%; height: auto;，并检查其src是否返回了带固定宽高的内联 style
警惕零宽字符和不可见文本节点干扰
复制粘贴来的广告代码常含零宽空格（\u200C）或零宽连接符（\u200D），它们在 inline 或 inline-block 广告容器中会生成真实文本节点，造成 1–2px 不可消除的偏移，尤其在按钮组、图标+文字组合里明显。
实操建议：
- 右键广告区域 → “Edit as HTML”，复制源码到 VS Code，装 “Highlight Bad Chars” 插件查看控制字符
- 执行
document.querySelector('.ad-container').innerHTML.includes('\u200C')快速确认是否存在 - 临时加
* { outline: 1px solid red !important; }，看是否有个看不见的 #text 节点意外占位 - 构建时用正则预处理：把无语义的
\u200C替换为 HTML 注释<!-- zwnj -->
真正卡住的往往不是广告本身，而是它周围那个没写 position: relative 的 div，或者被 overflow: hidden 裁掉一半的父容器——先盯死这两个地方，比调 z-index 实在得多。
