如何解决Chrome桌面端Google AdSense广告浮动在页面左上角问题

安全阿岳

2026-9-29

解决方案

核心原因

该问题是桌面端Chrome渲染AdSense广告时，广告异步加载生成的绝对定位元素没有找到相对定位的父级容器，默认以页面根元素为定位基准，因此浮动到左上角。Safari和移动端Chrome的广告渲染逻辑对父容器定位的容错性更高，因此未出现异常。

修复方法

给广告容器添加定位约束，修改你的代码如下：

<div class="card">
    <div class="card-header">광고</div>
    <div class="card-body" style="padding:5px !important; position: relative; min-width: 300px; min-height: 250px; overflow: clip;">
        <!-- 此处粘贴Google AdSense广告单元代码 -->
    </div>
</div>

新增属性说明：

position: relative：强制内部所有绝对定位元素以当前div为定位基准，从根源避免广告飘出容器
min-width/min-height：提前给广告预留渲染空间，避免异步加载时浏览器计算容器尺寸为0导致的渲染异常，数值可根据你申请的广告单元尺寸调整
overflow: clip：即使广告实际渲染尺寸超出预留空间，也不会溢出容器范围
如果你同时开启了AdSense自动广告，登录AdSense后台进入对应站点的广告设置，关闭锚定广告、浮动广告两类自动插入广告，避免系统自动插入的全局浮动广告和你手动放置的广告单元混淆
如仍有异常，可在全局样式表添加强制约束规则：

/* 限制AdSense广告仅在父容器内渲染 */
.card-body ins.adsbygoogle {
    display: block !important;
    position: relative !important;
    width: 100% !important;
}