jquery - 在视频标签上 float div

Question

我想在视频标签上弹出一个窗口，所以我有

<div id="wrap" position="absolute" z-index="0">
 <video id="myVideo" width="1280" height="720" src="http://r18---sn-hpa7ln7k.googlevideo.com/videoplayback?source=youtube&sver=3&expire=1384698665&mv=m&mt=1384676899&ms=au&id=685317f1e97ad761&ratebypass=yes&ipbits=0&itag=22&fexp=907050,907724,923311,916623,936912,936910,923308,936913,907231,907240&key=yt5&ip=2001:1af8:4700:a022:1::4ae9&upn=xVxSRTsM2uI&sparams=id,ip,ipbits,itag,ratebypass,source,upn,expire&signature=4754BDE5BDD4614502F9232BC5C1896C8454ADAE.A8D51C5B2E4C4583B884B36E0B4D16B235AF6463&title=Dani+M+-+Agenda+%23r%C3%B6dnovember.mp4" type="video/mp4" style="position:absolute;top:0px;left:0px;z-index:10000;"  position="absolute" z-index="0" >
        Your browser does not support the video tag.
</video> 
</div>
<div class='overlay' z-index="2"></div>
<div class='dialog' id='dialog-0' z-index="2">


    <div class='container'>
        <h5>Please enter the PIN-code</h5>
        <div class='rowForm'>
            <div class='labelField'>PIN</div>
            <div class="inputField" id='item-1-0'></div><br />
        </div>
        <span class="error-msg" id="error-pin"></span>
        <div class='buttonBar'>
            <div class='button' id='item-1-1'>OK</div>
            <div class='button' id='item-1-2'>Cancel</div>
        </div>
    </div>
</div>

但是弹出窗口仍然在视频下方，知道为什么吗？

Answer 1

z-index 和 position 不是 HTML 属性。它们需要添加到 CSS 中。元素还必须具有 position 设置，如 relative 或 absolute 才能使 z-index 起作用。

这是一个基于您的 HTML 的示例:

#wrap { position: absolute; z-index: 1; }
.overlay { position: relative; z-index: 2; }
.dialog { position: fixed: z-index: 3; }

最好在 CSS 中设置样式，这样可以使您的代码更易于维护并减小文件大小，但是如果您只能访问 HTML 或者如果只有一个元素需要样式，则可以使用 style 属性直接在元素上:

<div id="wrap" style="position: absolute; z-index: 1;"> ... </div>
<div class="overlay" style="position: relative; z-index: 2"></div>
<div class="dialog" style="position: fixed; z-index: 3"> ... </div>