Question

我正试图将一个div放在vimeo视频上，我觉得这很简单，但似乎没有。这是html：

<div id="wrap">
<iframe id="video" src="http://player.vimeo.com/video/15888399" width="100%" height="100%" wmode="transparent" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

这里也是小提琴：http://jsfiddle.net/wfX55/
我已经尝试了wmode="transparent"技术，但看起来似乎没有用。是否可以将div放在vimeo视频的顶部？

Answer 1

您必须将z-index与position: absolute or relative;

一起使用

Fiddle

Answer 2

您的div是您视频的父级，因此“低于”它。如果你想在视频中放一个div，那么你最好用这样的东西

<div class="parent">
<iframe></iframe>
<div class="floatedDiv"></div>
</div>

with this css

.parent{position:relative;}
iframe{position: relative;}
.floatedDiv{position: absolute; z-index: 2;}

您还需要设置Flash对象的wmode

Answer 3

看来你对你的z-index'ing有点困惑。试试这个......

<style>
#wrap {
    position: relative;
    width: 400px;
    height: 250px;
    background-color: silver;
}

#video {
    position: absolute;
    z-index: 99999;
}
</style>
<div id="wrap">
<div class="video">Something here I guess</div>
<iframe id="video" src="http://player.vimeo.com/video/15888399" width="100%" height="100%" wmode="transparent" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>
</div>

在vimeo视频上浮动div

3 个答案: