如何在chrome嵌入式视频播放器的顶部放置div

Question

我有一个将div放在iframe顶部的代码，该代码可以正常工作。但是，当我将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

不是iframe的问题，而是Flash Player的问题。

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/

Answer 3

您无需弄乱zindex即可从中删除浮点并添加位置：绝对值应放在顶层div上，并且应该可以使用