CODEWITHSUNDEEP
jqueryhtmlcss
Avraam Mavridis
Avraam Mavridis

Reputation: 8920

Floating div over video tag

I am trying to have a popup over a video tag, so I have

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

but the popup still is under the video, any idea why?

Upvotes: 1

Views: 1949

Answers (1)

shshaw
shshaw

Reputation: 3213

z-index and position aren't HTML attributes. They need to be added in the CSS. Elements also must have a position setting like relative or absolute for the z-index to work.

Here's an example based on your HTML:

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

Setting the styles in CSS is best, making your code easier to maintain and keeping file sizes down, but if you only have access to the HTML or if the styles are only needed on one element, you can use the style attribute directly on the elements:

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

Upvotes: 1

Related Questions