L'index Z ne fonctionne pas (avec le contexte de positionnement et d'empilement)

Question

J'ai un problème avec z-index. J'essaie de faire passer l'image sous vidéo située en iframe.

img 
{ 
    position:relative; 
} 

iframe 
{ 
    position:relative; 
    z-index: 2; 
} 

j'ai cherché réponse et seulement a obtenu des conseils sur la position et le contexte d'empilement qui est pas un problème ici (Si je pense bien sûr). J'apprécierais de l'aide!

EDIT Une partie html avec cette img et iframe

<div id="main-menu" class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <img src="images/logo/logo_biale_margins320.png" id="logo"/>  
    </div> 

    <section id="page-top" class="section-style" data-background-image="images/background/page-top.jpg"> 
     <div class="pattern height-resize"> 
      <div class="container" > 
        <center><h2 class="section-name"> 
         <span> 
          SHOVROOM<br/>available today! 
         </span> 
        </h2></center> 
        <h3><center> 
         Present Anything, Anywhere 
        </center></h3> 
       <br/><br/> 
       <header> 

        <center> 
             <iframe id="video" 
         src="https://www.youtube.com/embed/psraUPSYU28?rel=0" frameborder="0" allowfullscreen> 
        </iframe> 
        </center> 
       </header> 

Answer 1

La prochaine fois, ne comprend le code qui est pertinent à cette question. Afin de les faire se chevaucher, j'ai fait ce qui suit.

position: absolute; 

L'index z que vous avez indiqué semble fonctionner.

https://jsfiddle.net/JaredBledsoe/4v50bdwv/