Плавающий 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>