html - Leadbolt 广告上的关闭按钮叠加层

Question

我在我的移动应用上使用 Leadbolts HTML 广告。目前它看起来像这样：

我想要实现的是在右上角放一个 X，以便用户可以关闭广告。

广告代码如下所示：

<body>
  <script type="text/javascript" src="http://ad.leadboltmobile.net/show_app_ad.js?section_id=619553414"></script>
</body>

首先，我尝试将图像放在它上面，如下所示：

HTML：

<body>
  <img id="x" src="@routes.Assets.at("images/x.png")" onclick="closeAd()"/>
    <script type="text/javascript" src="http://ad.leadboltmobile.net/show_app_ad.js?section_id=619553414"></script>
</body>

CSS：

#x {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 40px;
    height: 40px;
}

即使图像是绝对定位的，它也根本不会出现。

然后我尝试将广告包装在一个 div 中。

HTML：

<body>
  <img id="x" src="@routes.Assets.at("images/x.png")" onclick="closeAd()"/>
  <div id="adWrapper">
    <script type="text/javascript" src="http://ad.leadboltmobile.net/show_app_ad.js?section_id=619553414"></script>
  </div>
</body>

CSS：

#x {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 40px;
    height: 40px;
}

#adWrapper {
    position: absolute;
    top: 45px;
}

但如图所示，广告仍然全屏显示。

有人可以帮我吗？

score 2 · Accepted Answer

高于z-index会#adWrapper修复它。使用z-index这种方式：

#x {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 40px;
    height: 40px;
    z-index: 2;
}

#adWrapper {
    position: absolute;
    top: 45px;
    z-index: 1;
}

html - Leadbolt 广告上的关闭按钮叠加层

1 回答 1

Related

Reference