Наложение кнопки "Закрыть" на объявление Leadbolt

Я использую рекламные объявления Leadbolts в моем мобильном приложении. В настоящее время это выглядит так:

То, чего я пытаюсь добиться, это поставить 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;
}

Но реклама по-прежнему отображается в полноэкранном режиме, как показано на рисунке.

Может ли кто-нибудь помочь мне здесь?

Источник

1 ответ

Решение

Высшее 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;
}
Источник
Другие вопросы по тегам