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的{{1}}设置才能使absolute生效。

以下是基于HTML的示例：

z-index

最好在CSS中设置样式，使代码更易于维护并保持文件大小不变，但如果您只能访问HTML，或者只需要在一个元素上使用样式，则可以使用{{1直接在元素上进行属性：

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

在视频标签上浮动div

1 个答案: