<分区>
您好，我想让横幅出现在 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>
最佳答案
需要在iframe和图片的wrapper中使用position: relative，然后在图片中使用position: absolute来设置它在元素中的位置，如示例所示:
https://jsfiddle.net/kLaj5gjj/
.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;
}<div class="relative-wrapper">
<!-- simulating iframe -->
<div class="iframe"></div>
<div class="banner">
<!-- simulatin image -->
<img class="some-image" />
</div>
</div>关于html - iframe 播放器和上面的横幅，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45130833/