html - 我们可以在 HTML5 视频之上堆叠元素吗？

Question

我想要的是例如:

<video> = z-index: -1;
<div id="post"> = z-index: 0;

我已经在一定程度上尝试过这个……但如果有人知道这方面的具体信息，那将是一件好事。我是 H5 视频的新手，我知道使用 Flash 是可能的，但不适用于移动设备(我不关心 atm，可能会有一些糟糕的回退)

感谢您提前提供任何信息。

Answer 1

您可以使用 z-index 将元素堆叠在 html5 视频之上，正如您所描述的那样。你可以用这个 jsfiddle 查看我的演示，http://jsfiddle.net/cJJwj/3/

这是我在那个 fiddle 中使用的代码:

HTML

<video width="200" height="200" 
    controls="controls" 
    src="http://upload.wikimedia.org/wikipedia/commons/4/43/Eisbach_surfen_v1.ogv">
</video>
<p>paragraph</p>

CSS

video {
    position: relative;
    z-index: 0;
}
p {
    position: absolute;
    top: 50px;
    left: 50px;
    color: red;
    font-size: 2em;
    border: medium solid yellow;
    z-index: 1;
}

不过，我应该提一下，我尝试对视频使用 z-index: -1;，但视频控件不起作用(在 Firefox 5 beta 和 Chrome 中)，但是当我改用了 z-index: 0，控件运行良好。我还不知道为什么会这样。