Question

我有一个代码，用于在iframe上放置div，这有效。但是，当我将iframe的src设置为youtube / vimeo播放器时，在chrome中iframe保持在顶部（它在safari和FF中工作正常）。

有什么方法可以解决这个问题吗？ CSS：

#over{
    float: left;
    margin-top: -293px;
    margin-left: 185px;
    background-color: #FF0000;
    height: 30px;
}
iframe{
    float: left;
    width: 100%;
    height: 550px;
}

HTML：

<div>
  <iframe src="http://player.vimeo.com/video/67124108?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff&amp;wmode=transparent">
    You don't have iframe support, unfortunately
  </iframe>
  <div id="over">I'm over the iframe</div>
</div>

[可在此处查看：http://jsfiddle.net/QPXAT/]

Answer 1

当您尝试添加z-index时，您是否指定了定位？ z-index仅适用于定位元素。所以我向两者添加了position: relative。这是你想要的效果吗？

http://jsfiddle.net/QPXAT/1/

Answer 2

您无需惹恼z-index。
删除float并将position: absolute添加到<div>的顶部，它应该可以工作。

#over {
  position: absolute;
  background-color: rgba(255, 0, 0, 0.5);
  width: 100%;
  height: 30px;
  top: 293px;
}

iframe {
  float: left;
  width: 100%;
  height: 550px;
}

Answer 3

这不是iframe的问题，这是flash播放器的一个问题。

Flash有所谓的wmode，它指定嵌入对象应如何与其他html内容一起显示。

通常它位于所有内容的顶部，但也可以指定它来尊重z-index等。

wmode = window：通常是默认选项。这会将Flash影片置于HTML页面上所有其他内容之上。

wmode = opaque：这种模式应该让Flash在HTML页面中很好地运行并遵循z-index排序。

以下是一个很好的总结：

http://www.8bitrocket.com/2011/02/11/quick-guide-to-wmode-and-flash-embedding/

如何在Chrome中嵌入视频播放器顶部放置div

3 个答案: