Z索引不起作用（定位和堆栈情境感知）

Question

我有Z指数的问题。我尝试使图像位于iframe中的视频下。

img 
{ 
    position:relative; 
} 

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

我寻找答案，只得到了大约在这里是没有问题的（如果我认为正确的路线）的位置和堆叠上下文的提示。我会欣赏一些帮助！

编辑HTML的这个IMG和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

下一次 部分，只包括是有关这个问题的代码。为了让它们重叠，我做了以下。

position: absolute; 

你给的z-索引似乎正在工作。

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