Question

您好我想在iframe播放器上显示横幅广告。这样的事情：http://i.imgur.com/nbcSVPP.png当然有一个关闭按钮。我的HTML代码就像这样

<div id="content-embed" style="min-height: 500px;">                 
    <iframe id="iframe-embed" width="100%" height="500px" scrolling="no" frameborder="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">
    </iframe>
</div>

CSS

#content-embed {
    width: 100%;
    position: relative;
}

到目前为止我尝试了什么（对不起，我不是css和html的高手）

<div id="content-embed" style="min-height: 500px;">                 
    <iframe id="iframe-embed" width="100%" height="500px" scrolling="no" frameborder="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" style="z-index: 0;">
    </iframe>
    <div style="z-index: 1;"><img src="/banner.jpg" /></div>
</div>

Answer 1

您需要在position: relative的包装中使用iframe和图像，然后在图像中使用position: absolute来设置其在元素中的位置，如示例所示：< / p>

https://jsfiddle.net/kLaj5gjj/

＆＃13;

.relative-wrapper {
  position: relative;
}

.iframe {
  /* simulating iframe */
  width: 500px;
  height: 300px;
  background-color: black;
}

.banner {
  /* banner positioning */
  position: absolute;
  top: 50%;
  left: 40%;
}

.some-image {
  /* simulating image size */
  width: 200px;
  height: 50px;
  background-color: red;
}

＆＃13;

<div class="relative-wrapper">
  <!-- simulating iframe -->
  <div class="iframe"></div>
  
  <div class="banner">
    <!-- simulatin image -->
    <img class="some-image" />
  </div>
</div>

＆＃13;

iframe播放器和横幅在它上面

1 个答案: