1

我有一个将 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/ ]

4

3 回答 3

2

When you tried adding a z-index, did you specify positioning? z-index only works on positioned elements. so I added position: relative to both. Is this the effect you were going for?

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

于 2013-06-10T15:16:03.270 回答
1

You don't need to mess with z-index.
Remove float and add position: absolute to top <div> and it should work.

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

iframe {
  float: left;
  width: 100%;
  height: 550px;
}
于 2020-05-18T17:46:21.517 回答
0

它不是 iframe 的问题，而是 flash 播放器的问题。

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

通常它在一切之上，但也可以指定为荣誉z-index等。

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

wmode=opaque : This mode is supposed to let Flash play well within an HTML page and adhere to z-index ordering.

Here is a good summary:

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

于 2013-06-09T18:42:48.223 回答