gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 02:56:51 26 4
gpt4 key购买 nike

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

enter image description here

我想要实现的是在右上角放置一个 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;
}

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

有人可以帮我吗?

最佳答案

#adWrapper 更高的 z-index 将修复它。以这种方式使用 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 广告上的关闭按钮叠加层,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32009631/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com