gpt4 book ai didi

javascript - HTML5 视频忽略 z-index

转载 作者:技术小花猫 更新时间:2023-10-29 12:14:40 25 4
gpt4 key购买 nike

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

<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。我目前在 chrome windows 上工作,但运气不好。有什么想法吗?

最佳答案

对重叠的两个元素使用 css position:absolute 属性,并尝试将高于 0 的值赋予 z-index

Here is working jsFiddle example.

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 示例。

来源:Video as background on a website playing on command

关于javascript - HTML5 视频忽略 z-index,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13388537/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com