HTML5视频忽略了z-index

Question

所以这就是我到目前为止所尝试的:

<div id="video" style="position:absolute;margin-top: 231px;margin-left: 127px;">

                    <video width="520" height="390" style="z-index:-10;">
                        <source src="m/video.ogv" type="video/ogg">
                        <source src="m/video.mp4" type="video/mp4">
                    </video>

</div>

我有一个固定的菜单,当菜单在视频上时,视频似乎忽略了z-index.我目前正在研究镀铬窗户,没有运气.有任何想法吗？

Answer 1

使用CSS position:absolute属性两者重叠元素,并尝试给出值高于0该z-index

这是jsFiddle的例子.

CSS:

#main_container { float: left; position: relative; left:0; top:0; }
#video { position: absolute; left: 0px; top: 0px; min-height: 100%;
         min-width: 100%; z-index: 9997; }?
#overlay { position: absolute; left: 0px; top: 0px; height: 100%; width: 100%;
           z-index: 9998; }

HTML:

<div id="main_container">
<div id="overlay"></div>
<video id="video" width="" height="" controls="controls" loop="loop" autoplay="">
 <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
 <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>
</div>

注意:使用overlay div来停用控件,您可以使用视频中的任何内容,例如jsFiddle示例.

来源:视频作为在命令上播放的网站上的背景