文章/答案/技术大牛

发布

问在视频标签上浮动div
EN

Stack Overflow用户

提问于 2013-11-19 22:26:17

回答 1查看 1.8K关注 0票数 1

我正试图在视频标签上弹出一个弹出框，所以我有

<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>

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

jquery

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-11-19 22:46:31

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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/20083397

复制

相似问题

问在视频标签上浮动div
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在视频标签上浮动divEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在视频标签上浮动div
EN